WebStorageで配列を使用する

WebStorageで配列やオブジェクトを保存する方法をメモ。

サンプルコード

まずは配列の保存を試してみます。
WebStorageに保存すると文字列に変換されてしまうため、データ保存前にはJSON.stringify()を、保存したデータを取得する際にJSON.parse()を使います。

var keyname = 'arrayData';

// データを取得して表示
var storageData = JSON.parse(localStorage.getItem(keyname));
if(storageData !== null) {
	console.log(storageData);
	console.log(storageData[0]);
}

// データの保存
var arr = ['A', 'B', 'C'];
localStorage.setItem(keyname, JSON.stringify(arr));

初回アクセス時はconsoleに何も表示されませんが、リロードして再度アクセスすると、初回時に保存したデータ内容でconsoleを表示することができました。
配列を保存するデモページ

次にオブジェクトの保存ですが、配列の時と同じ形で保存、表示ができます。

var keyname = 'arrayData2';

// データを取得して表示
var storageData = JSON.parse(localStorage.getItem(keyname));
if(storageData !== null) {
	console.log(storageData);
	console.log(storageData['name']);
}

// データの保存
var arr = {
	'name': 'suzuki',
	'age': 18
};
localStorage.setItem(keyname, JSON.stringify(arr));

オブジェクトを保存するデモページ