Web Storageによるテキストデータの保存 (2/6)
作成:2010-07-16 12:55
更新:2010-07-16 19:21
更新:2010-07-16 19:21
■セッションストレージとローカルストレージ
では、script.jsにスクリプトを作成しましょう。以下に、セッションストレージを使った場合と、ローカルストレージを使った場合の2通りのリストを掲載しておきます。いずれも、テキストを書いて「保存」ボタンを押すとストレージに値が保管され、「読み込み」ボタンを押すと保存した値をロードして表示します。
実際に両者を使って、動作の違いを確かめてみましょう。セッションストレージを使った場合、ブラウザを閉じると、もう値は消えてしまいます。次にブラウザを起動し、「読み込み」ボタンを押しても値は表示されません。
ローカルストレージを使った場合、ブラウザを終了してからまた起動してもちゃんと値がロードされます。ただし、値はブラウザごとに保管されますから、ローカルボリュームに保管したといっても、別のブラウザから読み込むことはできません。使えるのは、あくまで保存したブラウザだけです。
では、データの読み書きをしている部分を見てみましょう。以下に基本的なメソッドをざっと整理しておきます。
・セッションストレージの場合
・ローカルストレージの場合
読み書きは、いずれのオブジェクトも「getItem」「setItem」というメソッドとして用意されています。これらはいずれも値にキーを割り振って保管するようになっています。getItemでは、引数にキーを指定すると、そのキーに保管されているデータを返します。setItemでは、第1引数に指定したキーに、第2引数のデータを保管します。
キーは、すべてユニーク(同一の値がない)でなければいけません。また値は後で変更できますが、キーは変更できません(新たなキーに値を保存しなおすことは可能です)。
キーという名前をつけて値を保存するだけですから、扱いは非常に簡単です。反面、データベースのように複雑なデータを保管したり、複雑な検索をしたり、といった機能はありません。そのあたりは、すっきりと割り切って使うしかありません。(まぁ、「複雑なことがしたければデータベースを使え」ということなのでしょう)
実際に両者を使って、動作の違いを確かめてみましょう。セッションストレージを使った場合、ブラウザを閉じると、もう値は消えてしまいます。次にブラウザを起動し、「読み込み」ボタンを押しても値は表示されません。
ローカルストレージを使った場合、ブラウザを終了してからまた起動してもちゃんと値がロードされます。ただし、値はブラウザごとに保管されますから、ローカルボリュームに保管したといっても、別のブラウザから読み込むことはできません。使えるのは、あくまで保存したブラウザだけです。
では、データの読み書きをしている部分を見てみましょう。以下に基本的なメソッドをざっと整理しておきます。
・セッションストレージの場合
保存: sessionStorage.setItem( キー, 値 );
読込: 変数 = sessionStorage.getItem( キー );
・ローカルストレージの場合
保存: localStorage.setItem( キー, 値 );Webストレージは、セッション、ローカルボリュームそれぞれに「sessionStorage」「localStorage」という名前でオブジェクトが用意されています。これらの中にあるメソッドを呼び出すことで、データの読み書きが行えるわけです。
読込: 変数 = localStorage.getItem( キー );
読み書きは、いずれのオブジェクトも「getItem」「setItem」というメソッドとして用意されています。これらはいずれも値にキーを割り振って保管するようになっています。getItemでは、引数にキーを指定すると、そのキーに保管されているデータを返します。setItemでは、第1引数に指定したキーに、第2引数のデータを保管します。
キーは、すべてユニーク(同一の値がない)でなければいけません。また値は後で変更できますが、キーは変更できません(新たなキーに値を保存しなおすことは可能です)。
キーという名前をつけて値を保存するだけですから、扱いは非常に簡単です。反面、データベースのように複雑なデータを保管したり、複雑な検索をしたり、といった機能はありません。そのあたりは、すっきりと割り切って使うしかありません。(まぁ、「複雑なことがしたければデータベースを使え」ということなのでしょう)
(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; }
※関連コンテンツ
「JavaScriptによるHTML5プログラミング入門」に戻る