如何将 JSON 数据存储和检索到本地存储中？

Posted 2023-03-05

【中文标题】如何将 JSON 数据存储和检索到本地存储中？

【英文标题】：How to store and retrieve JSON data into local storage?

【发布时间】：2016-04-02 07:16:56

【问题描述】：

我有这个代码：

var string = '"items":["Desc":"Item1","Desc":"Item2"]';
localStorage.setItem('added-items', JSON.stringify(string));

此代码将使用 localStorage。

现在是获取存储数据的代码：

var retrievedObject = localStorage.getItem('added-items');

我现在的问题是，如何获取数据项的大小？答案必须是 2。

如何获得“Item1”和“Item2”？

我尝试了retrievedObject[0][0]，但它不起作用。

以及如何添加数据呢？ 所以会是

"items":["Desc":"Item1","Desc":"Item2","Desc":"Item3"]

我可以使用JSON.stringify吗？

【问题讨论】：

看来你需要双重解析

【参考方案1】：

// THIS IS ALREADY STRINGIFIED
var string = '"items":["Desc":"Item1","Desc":"Item2"]';

// DO NOT STRINGIFY AGAIN WHEN WRITING TO LOCAL STORAGE
localStorage.setItem('added-items', string);

// READ STRING FROM LOCAL STORAGE
var retrievedObject = localStorage.getItem('added-items');

// CONVERT STRING TO REGULAR JS OBJECT
var parsedObject = JSON.parse(retrievedObject);

// ACCESS DATA
console.log(parsedObject.items[0].Desc);

【参考方案2】：

为了让未来可能偶然发现这个问题并发现接受的答案并非您所希望和梦想的一切的人清楚：

我已经扩展了这个问题，以便用户可能想要在localStorage 中输入string 或JSON。

包括两个函数，AddToLocalStorage(data) 和 GetFromLocalStorage(key)。

使用AddToLocalStorage(data)，如果你输入的不是string（比如JSON），那么它会被转换成一个。

GetFromLocalStorage(key) 从上述localStorage 的localStorage 中检索数据

脚本末尾显示了如何检查和更改 JSON 中的数据的示例。因为它是对象和数组的组合，所以在适用的地方必须使用. 和[] 的组合。

var string = '"items":["Desc":"Item1","Desc":"Item2"]';
var json = "items":["Desc":"Item1","Desc":"Item2","firstName":"John","lastName":"Smith"];

localStorage.setItem('added-items', AddToLocalStorage(string));
localStorage.setItem('added-items', AddToLocalStorage(json));

// this function converts JSON into string to be entered into localStorage
function AddToLocalStorage(data) 
  if (typeof data != "string") data = JSON.stringify(data);
  return data;


// this function gets string from localStorage and converts it into JSON
function GetFromLocalStorage(key) 
  return JSON.parse(localStorage.getItem(key));


var myData = GetFromLocalStorage("added-items");

console.log(myData.items[2].firstName)    // "John"

myData.items[2].firstName = ["John","Elizabeth"];
myData.items[2].lastName = ["Smith","Howard"];

console.log(myData.items[2])    // "firstName":["John","Elizabeth"],"lastName":["Smith","Howard"]

console.log(myData.items.length)    // 4

【参考方案3】：

var string = '"items":["Desc":"Item1","Desc":"Item2"]';
localStorage.setItem('added-items', JSON.stringify(string));

stringify 表示，获取object 并将其演示文稿作为string 返回。 你所拥有的，已经是一个字符串，而不是一个 JSON 对象。

相反的是JSON.parse，它将string 转换为object。

它们都与获取数组的大小无关。在正确编码 javascript 时，您几乎从不使用 JSON.parse 或 JSON.stringify。仅当明确需要 序列化 时。

使用length 作为数组的大小：

var obj = "items":["Desc":"Item1","Desc":"Item2","Desc":"Item3"]
console.debug(obj.items.length);

【讨论】：

我用这个得到了 Item1，object.items[0].Desc。但是如何添加 "Desc":"Item3"]？

var foo = "Desc":"Item3"; items.push(foo);

但在这种情况下，他确实明确想要序列化——以便将其写入本地存储。

【参考方案4】：

JSON.parse 绝对是创建对象的最佳方式，但我只想添加如果这不起作用（因为缺乏支持），obj = eval('(' + str + ')'); 应该可以工作。过去，我在使用不包含 JSON.parse 和 eval 的 html 到 PDF 转换器时遇到了问题。先试试JSON.parse。

访问您的对象：obj.items[0].Desc;

【讨论】：

这个答案提出了一个糟糕的解决方案，甚至不是问题。

我不止一次地重申JSON.parse 是最好的方法，并在需要时提供了额外的方法。

什么环境下不支持JSON.parse？

该应用程序允许您使用 JavaScript，但不包括 JSON.parse。 eval 方法可以代替。

【参考方案5】：

var object = Json.parse(retrievedObject);

现在您可以像访问数组一样访问它

https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse

如果您需要更多帮助，我有一些以前的代码，我正在从本地存储读取 Json 并从该 json 制作表单。此代码将有助于理解如何遍历该数组

Json 存储在本地存储中

"form":["element":"input", "type":"text","name":"name","value":"value","min":"2","max":"10"]

JavaScript 读取该 json

function readJson()
    if(!form_created)
        add_form();
    
    var fetched_json = localStorage.getItem("json");
    var obj=JSON.parse(fetched_json);
    for(var i=0; i<obj.form.length;i++)
        var input = document.createElement(obj.form[i].element);
        input.name = obj.form[i].name;
        input.value = obj.form[i].value;
        input.type = obj.form[i].type;
        input.dataset.min = obj.form[i].min;
        input.dataset.max = obj.form[i].max;
        input.dataset.optional = obj.form[i].optional;
        
        form.insertBefore (input,form.lastChild);
    
    alert(obj.form[0].name);

【讨论】：

如何访问它？我试过 object[0][0][1] 但它返回 undefined

请检查更新后的答案，如果您需要任何帮助，请告诉我

试试 object.items[0].Desc

这是错误的。由于他已经对字符串进行了字符串化，因此要将其作为普通数组访问，他需要将其解析 两次，或者跳过对 JSON.stringify 的调用。

@torazaburo 我刚刚告诉了如何从本地存储中获取 json ，解析它并遍历结果数组。正如问题所说“如何将 JSON 数据存储和检索到本地存储中？”所以基本上反对票是不合理的。