Detaillierte Erläuterung der Implementierungsmethode von localStorage zum Speichern von JSON-Daten und zum Lesen von JSON-Daten in HTML5

localStorage ist eine von HTML5 bereitgestellte Methode zur Implementierung der lokalen Speicherung auf dem Client. Allerdings kann die localStorage-Methode nur -String--Daten speichern . Zu lokal, zum Beispiel: JSON Wie kann also localStorage die Speicherung und das Lesen von JSON-Daten realisieren? Lassen Sie uns die Lösung in diesem Artikel erklären. Werfen wir einen Blick darauf

localStorage ist eine von HTML5 bereitgestellte Methode zum Implementieren des lokalen Speichers auf dem Client, aber die localStorage-Methode kann manchmal nur Zeichenfolgendaten speichern Sie müssen Objekte wie JSON lokal speichern. Wie kann localStorage dann die Speicherung und das Lesen von JSON-Daten realisieren?

Idee: Da localStorage nur Zeichenfolgendaten speichern kann, können wir das JSON-Objekt zunächst in eine Zeichenfolge konvertieren und es dann mit der localStorage-Methode speichern. Wenn wir diese JSON-Daten verwenden müssen, lesen Sie sie zuerst und konvertieren Sie es dann zur Verwendung in ein JSON-Objekt.

Der spezifische Code lautet wie folgt:

var jsonData = {'name': '张三', 'age': 29}; // 定义一个JSON对象
var str_jsonData = JSON.stringify(jsonData);
console.log(typeof(str_jsonData)); // string
localStorage.setItem('localData', str_jsonData); // 存储字符串数据到本地
var getLocalData = localStorage.getItem('localData'); // 读取字符串数据
console.log(typeof(getLocalData)); // string
var jsonObj = JSON.parse(getLocalData);
console.log(typeof(jsonObj)); // obj
console.log(jsonObj.age); // 29

Erweiterung:

stringify( ) wird verwendet, um eine Zeichenfolge aus einem Objekt zu analysieren.

parse() wird verwendet, um ein JSON-Objekt aus einer Zeichenfolge zu analysieren.

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Implementierungsmethode von localStorage zum Speichern von JSON-Daten und zum Lesen von JSON-Daten in HTML5. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!