Wie können JSON-Daten im lokalen Speicher gespeichert und abgerufen werden?

Question

Ich habe diesen Code:

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

Dieser Code wird localstorage verwenden.

Hier ist nun der Code die gespeicherten Daten zu erhalten:

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

Mein Problem ist jetzt, wie kann ich die Größe der Datenelemente erhalten? Antwort muss 2 sein.

Wie kann ich die "Item1" und "Item2" bekommen?

Ich versuchte retrievedObject[0][0], aber es funktioniert nicht.

Und wie füge ich Daten hinzu? so wird es

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

Kann ich JSON.stringify benutzen?

Answer 1

stringify bedeutet, nehmen Sie eine object und geben Sie ihre Präsentation als string. Was Sie haben, ist bereits eine Zeichenfolge und kein JSON-Objekt.

Das Gegenteil ist JSON.parse, die eine string nimmt und verwandelt es in eine object.

Keine von beiden hat etwas mit der Größe eines Arrays zu tun. Wenn Sie JavaScript richtig programmieren, verwenden Sie fast nie JSON.parse oder JSON.stringify. Nur wenn Serialisierung explizit gewünscht ist.

Verwenden length für die Größe des Arrays:

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

Answer 2

var object = Json.parse(retrievedObject); 

Jetzt können Sie darauf zugreifen wie ein Array

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

Wenn Sie weitere Hilfe benötigen ich einige vorherigen Code haben, wo ich Json aus dem lokalen Speicher lese und machen eine Form von diesem json . Dieser Code wird dazu beitragen, das Verständnis, wie das Array in localstorage

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

JavaScript

Json gespeichert zu durchqueren, dass json zu lesen

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

Answer 3

JSON.parse ist definitiv der beste Weg, um ein Objekt zu erstellen, aber ich möchte nur hinzufügen, wenn das nicht (wegen der fehlenden Unterstützung) nicht funktioniert, obj = eval('(' + str + ')'); sollte funktionieren.Ich hatte ein Problem mit einem HTML-zu-PDF-Konverter in der Vergangenheit, die nicht JSON.parse und eval tat den Trick. Versuchen Sie zuerst JSON.parse.

Zugriff auf Ihre Aufgabe: obj.items[0].Desc;

Answer 4

// 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 5

Um Klarheit zu zukünftigen Menschen zu bringen, die sich über diese Frage stolpern und finden die akzeptierte Antwort auf nicht alles, was man gehofft und geträumt:

Ich habe Die Frage wurde erweitert, so dass der Benutzer entweder string oder JSON in localStorage eingeben möchte.

Enthalten sind zwei Funktionen, AddToLocalStorage(data) und GetFromLocalStorage(key).

Mit AddToLocalStorage(data), wenn Ihre Eingabe kein string (wie JSON) ist, wird es in eins konvertiert.

GetFromLocalStorage(key) ruft die Daten aus localStorage der key

Das Ende des Skripts zeigt ein Beispiel, wie die Daten innerhalb JSON zu prüfen und zu ändern. Da es sich um eine Kombination aus Objekten und Array handelt, muss eine Kombination von . und [] verwendet werden, wenn sie anwendbar sind.

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