无法使用 javascript 在本地存储中存储数组

Question

所以基本上我正在尝试创建在本地存储中存储一些用户信息并更新和删除用户的信息我刚刚开始处理它但在将完整的用户数据插入本地存储时遇到了困难。每当我存储用户数据时，我都会在本地存储中获取（对象：对象）。

<!DOCTYPE html>
<html>
<body>


First Name: <input type="text" id="fname" placeholder="Enter First Name Here">
Id: <input type="text" id="id" placeholder="Enter id Here"><br><br>


<button onclick="myFunction()" >Submit</button>
<br>
<br>


<p id="demo"></p>
<div id="result"></div>

<script>
 function myFunction(){   

  var fname = document.getElementById("fname").value;  
     var id = document.getElementById("id").value;  

    if (typeof(Storage) !== "undefined") {
    // Store
    var person = [ firstName: fname , ID : id  ];

    var tempitem =[ [localStorage.getItem("record")] ];

    console.log();

    tempitem.push(person);

     localStorage.setItem("record",  tempitem);
     //Check if an item can be deleted using index number


}
else {
    document.getElementById("result").innerHTML = "Sorry, your browser does not support Web Storage...";
}

}






</script>

</body>


</html>

Answer 1

由于 localStorage 只处理字符串，因此您需要使用 JSON.parse/JSON.stringify，如下所示

function myFunction(){     
    var fname = document.getElementById("fname").value;  
    var id = document.getElementById("id").value;  

    if (typeof(Storage) !== "undefined") {
        // note: using {} ... person is an Object, not an Array
        var person = {firstName: fname , ID : id  };

        // use JSON.parse to parse the string to an Object 
        var tempitem =JSON.parse(localStorage.getItem("record") || "[]");
        // || [] so of it doesn't exist, returns an empty array to push to
        tempitem.push(person);

        // stringify the Object to store as a string
        localStorage.setItem("record",  JSON.stringify(tempitem));
    }
}

Answer 2

localStorage 将项目存储在字符串中，因此在您的情况下，您应该这样做：

localStorage.setItem("record", JSON.stringify(tempitem))

如果您想从 localStorage 获取它，您可以这样做：

JSON.parse(localStorage.getItem('record'))

Answer 3

对于本地存储中的数据存储，记住您只能存储字符串值非常重要。存储对象或数组（或对象数组）时，必须先将数据转换为 JSON。

这很简单：

localStorage.setItem("record", JSON.stringify(data));

并再次读取值：

var record = JSON.parse(localStorage.getItem("record"));

如果您不这样做，Javascript 将尝试使用 toString() 方法对数据本身进行字符串化。对于对象，这意味着将存储值 [object Object] 而不是对象的实际内容。

而且您似乎混淆了 Javascript 对象和数组。

这是一个对象：

{
    firstName: "John"
    ID: "10"
}

这是一个数组：

[10, 20, 30, 40, 50]

注意在定义对象时使用“{”和“}”，在定义数组时使用“[”和“]”。另请注意，我们可以在一个对象中命名属性，而我们不能在数组中使用该对象。

对象数组将如下所示：

[
    {
        firstName: "John"
        ID: "10"
    },
    {
        firstName: "Mary"
        ID: "20"
    }
]

无法使用 javascript 在本地存储中存储数组

Unable to store array in local Storage using javascript

javascript

local

local-storage