Как хранить и извлекать данные JSON в локальное хранилище?

у меня есть этот код:

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?

7
javascript json local-storage

5 ответов

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

чтобы принести ясность будущим людям, которые могут наткнуться на этот вопрос и найти принятый ответ не все, что вы надеялись и мечтали:

я расширил вопрос, чтобы пользователь мог либо захотеть ввести 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
3

JSON.parse определенно лучший способ создать объект, но я просто хочу добавить, если это не работает (из-за отсутствия поддержки), obj = eval('(' + str + ')'); должны работать. У меня была проблема с конвертером HTML в PDF в прошлом, который не включал JSON.parse и eval сделал свое дело. Попробуй!--0--> первый.

доступ к объекту: obj.items[0].Desc;

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