クッキーより便利になったブラウザ標準ストレージ - Web Storage

Web開発

技術解説

連載 :

HTML5の便利なTips100選

2012年10月18日(木)

山田祥寛（YAMADA, Yoshihiro）

TIPS 038：ストレージ上のデータを削除する

TIPS 037で作成したサンプルに、データの削除機能を追加してみましょう。

［リスト04］指定されたデータをストレージから削除するコード（length.html）

01window.addEventListener('DOMContentLoaded',
02  function() {
03    if (localStorage) {
04      var storage = localStorage;
05      ...中略...
06      // ［削除］ボタンクリックで該当するデータを削除
07      document.querySelector('#remove').addEventListener('click', function (e) {
08        var n = document.querySelector('#name');
09        // テキストボックスで指定されたキーを削除（1）
10        storage.removeItem(n.value);
11        show();   // テーブルを再描画
12      });
13 
14      // ［クリア］ボタンクリックですべてのデータを削除
15      document.querySelector('#clear').addEventListener('click', function (e) {
16        // データをクリア（2）
17        storage.clear();
18        show();   // テーブルを再描画
19      });
20    }
21  }
22);
23...中略...
24<div class="container">
25  <label for="name">名前：</label>
26  <input id="name" type="text" value="" />
27</div>
28<div class="container">
29  <input id="remove" type="button" value="削除" />
30  <input id="clear" type="button" value="クリア" />
31</div>
32<table id="result"></table>

図7：指定のデータを削除（クリックで拡大）

指定されたデータを削除するには、removeItemメソッドを利用します。

［構文］removeItemメソッド

removeItem(名前)

すべてのデータをまとめてクリアするならば、clearメソッドを利用します。

［構文］clearメソッド

clear()

ただし、冒頭述べたようにストレージはオリジン単位に管理されます。ひとつのオリジンで複数のアプリを運用している場合などに、誤って他のアプリで利用しているデータまで削除してしまわないように注意してください。

TIPS 039：ストレージにオブジェクトを出し入れする

現在のブラウザでストレージに保存できるのは、文字列だけです。仕様の上ではストレージにはオブジェクトも格納できることになっていますが、現時点でこれに対応しているブラウザはありませんので注意してください。
オブジェクトを指定してもエラーにはなりませんが、toStringメソッドで内部的に文字列化された結果、まったく意味のないものになってしまうのです。

図8：ストレージにオブジェクトを保存した場合（デベロッパーツールで確認）（クリックで拡大）

そこで、オブジェクトをストレージに保存する場合には、以下のようなコードを書く必要があります。

［リスト05］ストレージにオブジェクトを保存するためのコード（obj.html）

01window.addEventListener('DOMContentLoaded',
02  function() {
03    if (localStorage) {
04      var storage = localStorage;
05      // オブジェクトを準備
06      var data1 = { name: '山田リオ', age: 5, favorite: 'ドラえもん' };
07      // ストレージに保存（1）
08      storage.setItem('data', JSON.stringify(data1));
09      // ストレージからデータを取得（2）
10      var data2 = JSON.parse(storage.getItem('data'));
11      // nameプロパティの内容を表示（3）
12      window.alert(data2.name);
13    }
14  }
15);

図9：オブジェクトのnameプロパティが正しくダイアログ表示できた

JSON.stringifyメソッドを利用することで、オブジェクトをJSON^（＊）という文字列の形式に変換できます（1）。

［構文］stringifyメソッド

JSON.stringify(オブジェクト)

＊）JavaScript Object Notation。JavaScriptのオブジェクトを表すための記法。Ajax技術などでよく利用される。

例えばサンプルの例であれば、以下のような文字列が生成されます。

{"name":"山田リオ","age":5,"favorite":"ドラえもん"}

文字列にしてしまえば、あとはこれまでと同じくsetItemメソッドなどで保存が可能です。

ただし、getItemメソッドでデータを取り出した時には注意が必要です（2）。というのも、そのままでは文字列ですので、これをオブジェクトに再変換する必要があるのです。これを行うのが、JSON.parseメソッドです。

［構文］parseメソッド

JSON.parse(文字列)

変換された結果、「data2.name」のようにオブジェクトとして配下のプロパティにもアクセスできることが確認できます（3）。

TIPS 040：ストレージの登録／更新／削除を監視する

ストレージで登録／更新／削除などなんらかの操作が行われた場合、storageというイベントが発生します。これを利用することで、ストレージの変化に対して処理を実行するようなコードを記述できます。

なお、storageイベントは現在のページからの操作では発生しない場合があるようです（あくまで自分とは別のところでストレージが操作されたことを検出するためのしくみだからです）。サンプルを確認する場合は、event.htmlを起動した状態で、set.htmlを実行してください。

［リスト06］ストレージが変化した時にその結果を表示するコード（event.html）

01window.addEventListener('DOMContentLoaded',
02  function() {
03    if (localStorage) {
04      // ストレージが変更された時に実行するコード
05      window.addEventListener('storage', function (e) {
06        // イベント発生時の情報をページに反映
07        document.querySelector('#key').innerHTML = e.key;
08        document.querySelector('#old').innerHTML = e.oldValue;
09        document.querySelector('#new').innerHTML = e.newValue;
10        document.querySelector('#url').innerHTML = e.url;
11      }, false);
12    }
13  }
14);

図10：ストレージへの変更内容がページに反映された

storageイベントリスナの中では、イベントオブジェクトeを介して、以下のような情報にアクセスできます。

表5：イベントオブジェクトで取得できる情報

プロパティ	概要
key	イベント発生の原因となったキー
newValue	変更後の値（登録／更新時）
oldValue	変更前の値（更新／削除時）
url	発生元のURL
storageArea	ストレージの種類（sessionStorage／localStorageオブジェクト）