Web Storageによるテキストデータの保存 (2/6)

では、script.jsにスクリプトを作成しましょう。以下に、セッションストレージを使った場合と、ローカルストレージを使った場合の２通りのリストを掲載しておきます。いずれも、テキストを書いて「保存」ボタンを押すとストレージに値が保管され、「読み込み」ボタンを押すと保存した値をロードして表示します。

実際に両者を使って、動作の違いを確かめてみましょう。セッションストレージを使った場合、ブラウザを閉じると、もう値は消えてしまいます。次にブラウザを起動し、「読み込み」ボタンを押しても値は表示されません。

ローカルストレージを使った場合、ブラウザを終了してからまた起動してもちゃんと値がロードされます。ただし、値はブラウザごとに保管されますから、ローカルボリュームに保管したといっても、別のブラウザから読み込むことはできません。使えるのは、あくまで保存したブラウザだけです。

では、データの読み書きをしている部分を見てみましょう。以下に基本的なメソッドをざっと整理しておきます。

・セッションストレージの場合

保存：　sessionStorage.setItem( キー, 値 );
読込：　変数 = sessionStorage.getItem( キー );

・ローカルストレージの場合

保存：　localStorage.setItem( キー, 値 );
読込：　変数 = localStorage.getItem( キー );

Webストレージは、セッション、ローカルボリュームそれぞれに「sessionStorage」「localStorage」という名前でオブジェクトが用意されています。これらの中にあるメソッドを呼び出すことで、データの読み書きが行えるわけです。

読み書きは、いずれのオブジェクトも「getItem」「setItem」というメソッドとして用意されています。これらはいずれも値にキーを割り振って保管するようになっています。getItemでは、引数にキーを指定すると、そのキーに保管されているデータを返します。setItemでは、第１引数に指定したキーに、第２引数のデータを保管します。

キーは、すべてユニーク（同一の値がない）でなければいけません。また値は後で変更できますが、キーは変更できません（新たなキーに値を保存しなおすことは可能です）。

キーという名前をつけて値を保存するだけですから、扱いは非常に簡単です。反面、データベースのように複雑なデータを保管したり、複雑な検索をしたり、といった機能はありません。そのあたりは、すっきりと割り切って使うしかありません。（まぁ、「複雑なことがしたければデータベースを使え」ということなのでしょう）

(by. SYODA-Tuyano.)

※リストが表示されない場合

AddBlockなどの広告ブロックツールがONになっているとリストなどが表示されない場合があります。これらのツールをOFFにしてみてください。

※セッションストレージの例

function saveStorage(id){
	var target = document.getElementById(id);
	var str = target.value;
	sessionStorage.setItem("message",str);
}

function loadStorage(id){
	var target = document.getElementById(id);
	var msg = sessionStorage.getItem("message");
	target.innerHTML = msg;
}

※ローカルストレージの例

function saveStorage(id){
	var target = document.getElementById(id);
	var str = target.value;
	localStorage.setItem("message",str);
}

function loadStorage(id){
	var target = document.getElementById(id);
	var msg = localStorage.getItem("message");
	target.innerHTML = msg;
}