Maison >interface Web >Tutoriel H5 >Explication détaillée de la méthode d'implémentation de localStorage stockant les données JSON et lisant les données JSON en HTML5

Explication détaillée de la méthode d'implémentation de localStorage stockant les données JSON et lisant les données JSON en HTML5

高洛峰
高洛峰original
2017-03-12 16:12:341683parcourir

localStorage est une méthode fournie par HTML5 pour implémenter le stockage local sur le client. Cependant, la méthode localStorage ne peut stocker que des données chaîne . Parfois, nous devons stocker objets. . En local, par exemple : JSON Alors, comment localStorage peut-il réaliser le stockage et la lecture des données JSON ? Expliquons la solution à tout le monde à travers cet article, jetons un coup d'oeil

localStorage est une méthode fournie par HTML5 pour implémenter le stockage local sur le client, mais la méthode localStorage ne peut stocker que des données de chaîne. Parfois, nous. besoin de stocker des objets localement, tels que JSON ; alors, comment localStorage peut-il réaliser le stockage et la lecture des données JSON ?

Idée : étant donné que localStorage ne peut stocker que des données de chaîne, nous pouvons d'abord convertir l'objet JSON en chaîne, puis le stocker à l'aide de la méthode localStorage lorsque nous avons besoin d'utiliser ces données JSON, lisez-les d'abord. puis convertissez-le en un objet JSON à utiliser.

Le code spécifique est le suivant :


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


Extension :

stringify( ) est utilisé pour analyser une chaîne à partir d'un objet ;

parse() est utilisé pour analyser un objet json à partir d'une chaîne.


Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn