Question

我有这段代码：

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

此代码将使用localStorage。

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

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

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

我怎样才能获得＆＃34; Item1＆＃34;和＆＃34; Item2＆＃34;？

我尝试了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

为未来的人们提供清晰的信息，这些人可能偶然发现这个问题，并找到了所接受的答案，而不是你希望和梦想的一切：

我已对问题进行了扩展，以便用户可能要将string或JSON输入localStorage。

包括两个功能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

中

＆＃13;

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

＆＃13;

JavaScript读取json

＆＃13;

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

＆＃13;

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

5 个答案: