js　Web storage

js

Web storageはCookieでは扱えない大容量のデータをブラウザ側に保存するAPI。

Web storage
5MB（仕様上）
Cookie
4KB

蓄積できるデータは、キーと値のセット。

Web storageによって表示コンテンツを事前にブラウザに蓄積しておけば、アクセスの都度、コンテンツ取得のためのサーバーリクエストが必要なくなり、パフォーマンス向上、サーバー負荷の低減が期待できる。

HTML5で導入されたオフライン技術（Application Cache）と組み合わせることでオフライン状況でもWebアプリケーションを利用することができる。
オフラインで作業した状態をWeb Storageに保存しておき、オンライン時にサーバーと同期するといったことができる。

Web Storageで定義されているストレージの種類

セッションストレージ
ウィンドウごとのセッションで有効なストレージ
ローカルストレージ
ブラウザ内に永続的にデータを保存するストレージ

Storage API

Storageのプロパティ
length ストレージに格納されているキー/値のペア数
storageのメソッド
key() 指定した番号のキーを返す
getItem() 指定したキーの値を返す
setItem() 指定したキーと値を保存
clearDataItem() 指定したキーの値を削除
clear() すべてのデータを削除

ストレージデータへのアクセス権限

アクセス権限はページのオリジンで判断される。

オリジン：
https://hoge.com:8080
スキーム://ドメイン:ポート

storageイベント

ストレージ領域に変更が発生した際に発火。

StorageEventのプロパティ
key 変更があったキー
oldValue 変更があった値の古い値
newValue 変更があった値の新しい値
url キーが変更されたドキュメントのアドレス
storageArea 変更のあったstorageオブジェクト

最終更新日：

キー/値のペア数：

キー[0]：

  • ↓[データ一覧]
<form method="post" action="https://codes.lists111.com/?p=175">
	<textarea id="textarea" cols="50" rows="4"></textarea>
	<p>最終更新日：<span id="lastModified"></span></p>
	<p>キー/値のペア数：<span id="storageSet"></span></p>
	<p>キー[0]：<span id="key"></span></p>
	<ul id="storages"><li>↓[データ一覧]</li></ul>
	<input id="submit" type="submit" value="保存">
	<input id="clearData" type="button" value="データ削除">
	<input id="clearVal" type="text" placeholder="キーを指定して値を削除">
	<input id="clearValSubmit" type="submit" value="キーを指定して値を削除">
</form>

;(function() {
	window.addEventListener('DOMContentLoaded', function() {
		saveTextarea();
		loadLoacalStorageData();
		clearStorage();
		clearValue();
	}, false);

	var inputData = document.getElementById('textarea'),
			lastModified = document.getElementById('lastModified'),
			storageSet = document.getElementById('storageSet'),
			key = document.getElementById('key'),
			storages = document.getElementById('storages'),
			clearData = document.getElementById('clearData');

	// テキストエリアの内容をlocalStorageに保存
	function saveTextarea() {
		// 入力内容を保存
		var submit = document.getElementById('submit');
		submit.addEventListener('click', function() {
			localStorage.setItem('textarea', inputData.value);

			// 保存日時を保存
			var lastModified = new Date();
			localStorage.setItem('lastModified', lastModified);
			// 保存日時を画面に表示
			lastModified.innerHTML = lastModified;
		}, false);
	}

	// ページ読込時に、ローカルストレージに保存されているデータを表示
	function loadLoacalStorageData() {
		inputData.value = localStorage.getItem('textarea');
		lastModified.innerHTML = localStorage.getItem('lastModified');
		storageSet.innerHTML = localStorage.length;
		key.innerHTML = localStorage.key(0);

		// 一覧表示
		var liElementNode = '';
		var liTextNode = '';
		for(var k in localStorage) {
			liElementNode = document.createElement('li');
			liTextNode = document.createTextNode(k + ' : ' + localStorage[k]);
			liElementNode.appendChild(liTextNode);
			storages.appendChild(liElementNode);
		}
	}

	// すべてのデータを削除
	function clearStorage() {
		clearData.addEventListener('click', function() {
			localStorage.clear();
			location.reload();
		}, false);
	}

	// 指定したキーの値を削除
	function clearValue(key) {
		clearValSubmit.addEventListener('click', function() {
			key = clearVal.value;
			localStorage.removeItem(key);
			location.reload();
		}, false);
	}
})();