Webストレージの特徴と保存・読み出し・削除の仕方を学びます。
今回はHTML5で実装されたWebストレージについてお話をします。
Webストレージの概要
Webストレージとよく比べられるものとしてCookieがあります。
WebストレージはCookieよりも大きなデータを手軽に扱うことができます。
また、Cookieと違って有効期限がありません。
Webストレージは「プロトコル、ドメイン、ポート」で一つのストレージを持ちます。
つまり、他のドメインはもちろんのこと、プロトコルやポートが違ってもアクセスができません。
逆に、「プロトコル、ドメイン、ポート」が同じならば、ディレクトリの階層と関係なく、アクセスすることができます。
この「プロトコル、ドメイン、ポート」のひとグループのことを「オリジン」といいます。
WebストレージにはCookieと同じように、セッションストレージとローカルストレージの2つの種類があります。
セッションストレージは一時的にデータを保存しますが、ウィンドウを閉じるタイミングで消えます。
同じドメインのサイトを別々のウィンドウで開いている場合には、それぞれが別のセッションストレージとなります。
一方、ローカルストレージは永続的にデータを保存します。
セッションストレージとローカルストレージのいずれも、ウィンドウオブジェクトの直下にあります。
Webストレージに対応しているかどうかは、それぞれのオブジェクトがあるかどうかで確認することができます。
Webストレージへの保存
ストレージのオブジェクトは「sessionStorage」と「localStorage」の2つがありますが、使い方は同じなので、localStorageを例にとって説明します。
書式はこのようになります。
window.localStorage.setItem(“keyの値” , “valueの値”);
最上位オブジェクトの「window」は省略することができます。
Webストレージからの読み出し
こちらもlocalStorageを例にとって説明します。
書式はこのようになります。
str = window.localStorage.getItem(“keyの値”);
strには文字列が入ります。
Webストレージの削除
特定のキーを削除する場合はこのようになります。
window.localStorage.removeItem(“keyの値”);
また、全てのデータを削除するにはこのように書きます。
window.localStorage.clear();
まとめ
Webストレージにはまだいくつかメソッドやプロパティがありますが、今回説明した保存と読み出しと削除があれば、事足りると思います。IE8から対応しているので、2016年9月現在では気兼ねなく使えるのではないでしょうか。
Cookieと似たところもありますが、いくつか挙動が違うところがありますので、実装する際には読み書きの有効範囲などに、気をつけるようにしましょう。
