Html5でJSONデータを保存・読み込みするlocalStorageの実装方法を詳しく解説

localStorage は、クライアントにローカル ストレージを実装するために HTML5 によって提供されるメソッドですが、localStorage メソッドは string データのみを保存する必要がある場合があります。次のように、JSON; JSON データの保存と読み取りを実現するにはどうすればよいでしょうか?この記事を通じて解決策のアイデアを説明し、一緒に見てみましょう
localStorage は、クライアントにローカル ストレージを実装するために HTML5 によって提供されるメソッドですが、localStorage メソッドは文字列データのみを保存する必要がある場合があります。ローカル 例: JSON では、localStorage はどのようにして JSON データの保存と読み取りを実現できるのでしょうか?アイデア: localStorage は文字列データのみを保存できるため、最初に JSON オブジェクトを文字列に変換し、次に localStorage メソッドを使用してそれを保存できます。これらの JSON データを使用する必要がある場合は、まずそれらを読み取ってから、次に、それを JSON オブジェクトに変換して使用します。

具体的なコードは次のとおりです:

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

拡張:

stringify() はオブジェクトから文字列を解析するために使用されます。

parse() は文字列から json オブジェクトを解析するために使用されます。 。

以上がHtml5でJSONデータを保存・読み込みするlocalStorageの実装方法を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。