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

Question

我有这个代码：

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吗？

Answer 1

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);

Answer 2

// 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);

Answer 3

为了让那些可能偶然发现这个问题的未来的人们清楚地认识到并且找到了所接受的答案，而不是你希望和梦想的一切：

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

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

使用AddToLocalStorage(data) ，如果您的输入不是string （例如JSON ），那么它将被转换为一个。

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

脚本的结尾显示了如何在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 

Answer 4

JSON.parse绝对是创建对象的最佳方式，但我只想添加，如果这不起作用（因为缺乏支持）， obj = eval('(' + str + ')'); 应该管用。 我过去遇到过一个HTML到PDF转换器的问题，它没有包含JSON.parse和eval 。 首先尝试JSON.parse 。

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

Answer 5

var object = Json.parse(retrievedObject);

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

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

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

Json存储在localstorage中

 {"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); }