記事内に広告が含まれています。

localStorage への JSON データ保存と復元

2014年9月23日

cookie 以外でブラウザ側にデータを保存することの出来る localStorage があります。
ここでは簡単に localStorage へ JSON データを保存し、復元する例を紹介します。
JSON データは文字列データではないため、JSON.stringify() メソッドでシリアライズし、
JSON.parse() メソッドでデシリアライズしています。

// JSON データ
var friend = { ID : 1, Name : "Kai" };

// localStorage に JSON データを保存
// JSON.stringify を用いて JSON をシリアライズ（文字列化）
localStorage.setItem('kai', JSON.stringify(friend));

// 確認：変数 friend は JSON データ
console.log("json data : " + friend);

// 確認：localStorage には文字列として保存されている
console.log("localStorage data : " + localStorage.getItem("kai"));

// JSON.parse を用いてシリアライズされている JSON をデシリアライズ
var friendRetreived = JSON.parse(localStorage.getItem("kai"));

// JSON データが復元されている
console.log("deserialized data : " + friendRetreived);

-JavaScript