localStorageを使ってみる

cookieのようにブラウザにデータを保存できる「localStorage」を試してみます。

使い方

簡単な使い方を見てみます。

保存

keyに保存名、valueに保存する値を入れます。

localStorage.setItem(key, value);

参照

呼び出したいデータ名をkeyに入れ、取得したデータをdataに追加します。
値が保存されていない場合、nullが返ってきます。

var data = localStorage.getItem(key);

削除

削除したいデータ名をkeyに入れます。

localStorage.removeItem(key);

以下は実際に組み込んだサンプルです。

HTML

<input type="text" id="save-data" placeholder="保存するデータ入力" />
<button id="save">保存</button>
<button id="del">削除</button>

JavaScript

var storageKey = 'keyName';
var storageData = localStorage.getItem(storageKey);
alert('save data:' + storageData);

var save = document.getElementById('save');
save.onclick = function() {
	saveData = document.getElementById('save-data').value;
	localStorage.setItem(storageKey, saveData);
};

var del = document.getElementById('del');
del.onclick = function() {
	localStorage.removeItem(storageKey);
};

データを保存していないとnullとアラートが出ますが、保存後にリロードすると、入力したデータ内容がアラートで表示されます。
localStorageの使い方のデモページ
　

1つのkeyに値を複数保存する

データを一旦文字列に変換することで、1つのkeyに対して値を複数保存することができます。

保存

保存する際にJSON.stringify()を使ってデータを文字列に変換します。

localStorage.setItem(key, JSON.stringify(value));

参照

呼び出したデータをJSON.parse()を使ってオブジェクトに変換します。

var data = JSON.parse(localStorage.getItem(key));

以下は実際に組み込んだサンプルです。

HTML

<button id="del">削除</button>

JavaScript

var storageKey = 'keyName2';
var storageData = JSON.parse(localStorage.getItem(storageKey));
console.log(storageData);

var saveData = [
	{
		key1: 'data1-1',
		key2: 'data1-2',
		key3: ['data1-3-1', 'data1-3-2']
	}, {
		key1: 'data2-1',
		key2: 'data2-2',
		key3: ['data2-3-1', 'data2-3-2']
	}
];
localStorage.setItem(storageKey, JSON.stringify(saveData));

var del = document.getElementById('del');
del.onclick = function() {
	localStorage.removeItem(storageKey);
};

1回目のアクセスではconsoleにnullが表示されますが、データを保存した2回目以降はconsoleに複数のデータが表示されます。
1つのkeyに値を複数保存するデモページ
　

【参考サイト】

• localStorageで複数のデータを保存する | Tips Note
• JavaScript – ブラウザ側でデータを保存するため各ブラウザにおけるローカルストレージの挙動の調査 – Qiita