Question

我正在编辑个人资料页面。该页面将显示用户在首次注册帐户时输入的数据。当他们更改显示名称和密码时，我想保存它，以便它也可以更新到本地存储中。

当前本地存储显示的内容：

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

例如，用户将名称更改为ben和密码为1234，本地存储应为

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

如何编写代码以进行此类更改？请不要给出“保存密码是个坏主意”这样的评论作为我为学校项目做的答案。

此外，我还想在另一个名为个人资料页面的页面中显示用户信息，该信息将保存在本地存储中，并且我想将它们显示为个人资料页面信息。如何编写代码？

Answer 1

所有浏览器均不支持

警告1 - localStorage。 Check browser compatibility list

警告2 - 请勿在生产中使用代码段。这仅用于演示目的，以显示工作原理。

<!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>

Answer 2

我建议你使用mysql。使用Mysql，您可以轻松地操作大（和小）数据块。如果您仍想在文件上执行此操作，我建议将您创建的数组保存到文本文件中。如果你想要改变一些东西，你可以读取文件，在结果和bam上使用JSON.parse，你有一个循环的数组，找到正确的子数组并更改值。然后，您只需删除该文件并创建一个新文件，并在其中写入已更改的数组

现在让我解释一下如何完成所说的事情：

首先，您要检查是否已创建文件，以便我们获取内容。为此，您需要使用PHP：

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

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

此代码将搜索您的website.php位于名为 file.txt 的同一文件夹中的文件。如果找到该文件，它将获取内容供以后使用

要将此信息提供给javascript，我们只需使用此行

即可

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

现在我们在javascript中有变量，我们可以修改我们现在要做的信息。

首先，我们使用文本文件创建一个数组，并将新数据附加到该数组

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

我们在这里谈论的新品应该看起来像这样

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

现在，我们有更新的数组，我们使用jquery写入文件。首先，您需要在您的网站中包含jquery。为此，您可以将此行添加到页面的（最好）标题中

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

要写入该文件，我们将在此处使用我们的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);
         }
       }
    });

为了使其正常工作，您需要创建一个名为 script.php 的新文件

这是script.php看起来的样子

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';
}

如果我错过了任何内容或者它给你错误就说出来了，我有点匆匆写了这篇文章：）

如何编写javascript代码来更新本地存储数据

2 个答案: