Comment écrire des codes javascript pour mettre à jour des données de stockage local

Question

Je travaille sur une page de profil d'édition. la page afficherait les données que l'utilisateur a saisies lors de leur première inscription au compte. Quand ils changent leur nom d'affichage et mot de passe, je voudrais l'enregistrer de sorte qu'il soit également mis à jour dans le stockage local.

Qu'est-ce que le courant de stockage local montre:

{"username":"staff3","name":"alice","password":"123"} 

Par exemple, l'utilisateur change le nom à ben et mot de passe 1234, le stockage local doit être

{"username":"staff3","name":"ben","password":"1234"} 

Comment puis-je écrire les codes faire ce genre de changements? S'il vous plaît ne pas donner des commentaires comme «enregistrer le mot de passe est une mauvaise idée» comme la réponse que je fais pour un projet d'école.

En outre, je voudrais également afficher les informations d'utilisateur dans une autre page appelée page de profil, l'information serait celle enregistrée dans le stockage local, et je veux les afficher comme une information de page de profil. Comment écrire les codes?

Answer 1

Je vous suggère d'utiliser mysql. En utilisant Mysql, vous pouvez facilement manipuler de gros (et petits) morceaux de données. Si vous voulez toujours faire cela sur un fichier, je suggère de sauvegarder le tableau que vous avez créé dans le fichier texte. Dans le cas où vous voulez changer quelque chose, vous pouvez lire le fichier, utiliser JSON.parse sur le résultat et bam, vous avez un tableau à parcourir, trouver le sous-tableau correct et changer la valeur. Ensuite, vous supprimez simplement le fichier et de créer un nouveau avec votre tableau a changé écrit dans ce

Maintenant, laissez-moi vous expliquer comment vous pouvez accomplir dit des choses:

Tout d'abord, vous voulez vérifier s'il y a déjà un fichier créé afin que nous puissions obtenir le contenu. Pour ce faire, vous voulez utiliser PHP:

<?php 
$filename = 'file.txt'; 

if (file_exists($filename)) { 
    $handle = fopen($filename, "r"); 
    $fc = fread($handle, filesize($filename)); 
    fclose($handle); 
}else{ 
    $fc = "none"; 
} 
?> 

ce code recherchera un fichier dans le même dossier de votre website.php se trouve dans le nom file.txt. Si elle trouve le fichier, il obtiendra le contenu pour utiliser plus tard

Pour obtenir ces informations à javascript, nous utilisons simplement cette ligne

var filecontent = <?php echo json_encode($fc); ?>; 

maintenant que nous avons la variable javascript, nous peut modifier l'information, ce que nous allons faire maintenant.

D'abord, nous créons un tableau avec le fichier texte et ajouter nos nouvelles données à ce tableau

if(contentarray!="none"){ 
    var contentarray = JSON.parse(filecontent); 
    contentarray.push(newentry); 
}else{ 
    contentarray[0] = newentry; 
} 

Notre newentry nous parlons ici devrait ressembler à ceci

var newentry = {"username":"staff3","name":"alice","password":"123"}; 

Maintenant, que nous avons le tableau mis à jour, nous écrivons dans le fichier en utilisant jquery. Tout d'abord, vous devez inclure jquery sur votre site Web.Pour ce faire, vous ajoutez cette ligne dans l'en-tête (de préférence) de la page

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 

Pour écrire dans le fichier, nous allons à ce à notre javascript

var text = JSON.stringify(contentarray); 
    $.ajax({ 
     url: "script.php", 
     method: "POST", 
     data: { data: text }, 
     success: function(result){ 
     if(result==1){ 
      alert("It worked!"); 
     }else{ 
      alert("It did not work!"); 
      console.log(result); 
     } 
     } 
    }); 

Pour ce au travail, vous devrez créer un nouveau fichier appelé script.php

Voici comment le script.php devrait ressembler

if(isset($_POST['data'])){ 
    $filename = 'file.txt'; //you want to use the same filename as above 
    @unlink($filename); //using the @ to not get an error if there is no file to delete, will be important later 
    $myfile = fopen("testfile.txt", "w"); 
    fwrite($myfile, $_POST['data']); 
    fclose($myfile); 
    echo '1'; 
} 

Si je raté quelque chose ou il vous donne des erreurs de dire, je peu écrit ce pressé :)

Answer 2

Avertissement 1 - localStorage est pas pris en charge dans tous les navigateurs. Check browser compatibility list.

Avertissement 2 - Ne pas utiliser d'extrait dans la production. Ceci est juste à des fins de démonstration, pour montrer comment les choses fonctionnent.

<!DOCTYPE html> 
<html> 
<head> 
    <title></title> 
</head> 
<body> 

<form id="profile_details"> 
<p>Username: <input type="text" name="username"> 
<p>Name: <input type="text" name="name"> <label>New name: </label><label id="new_name"></label> 
<p>Password: <input type="password" name="password"> <label>New password: </label><label id="new_pwd"></label> 
<p><input id="sbmtbtn" type="button" value="Submit"> 
</form> 

<script type="text/javascript"> 
var userDb = localStorage; 
window.onload = function() { 
    document.querySelector("[name=username]").value = userDb.getItem("username") || "alice"; 
    document.querySelector("[name=name]").value = userDb.getItem("name") || "Alice" ; 
    document.querySelector("[name=password]").value = userDb.getItem("password") || "qwerty"; 
} 

document.getElementById("sbmtbtn").addEventListener("click", function(){ 
    var name = document.querySelector("[name=name]").value; 
    var password = document.querySelector("[name=password]").value; 
    document.getElementById("new_name").innerHTML = name; 
    document.getElementById("new_pwd").innerHTML = password.slice(0,1)+"...."; 
    userDb.setItem("name", name); 
    userDb.setItem("password", password); 
}); 
</script> 
</body> 
</html>