皆さんこんにちわ。@kouhei_mitsuyaです。
今日はHTML5のWeb Storageという仕組みについて書きます。
Web Storageとはクライアントのディスク上にデータを保存しておく為のストレージです。
これまではCookieが一般的でしたが下記のようにこのWebStorageにはCookieと違った点がいくつかあります。
1.サイズの制限が無い
Cookieは4キロバイト以下に制限されているに対してWeb Storageは制限がない2.有効期限がない
Web Storageは意図的に削除しない限りCookieの様に期限を過ぎると自動削除されるという機能はない。3.サーバーに送信されない
全てのリクエストにおいてCookieはサーバー側に送信されてしまいますがWeb Storageにはそういった動作は無い。ではWeb Storageの一つである[localStorage]を紹介します。
localStorageとはユーザーが明示的にストレージをクリアしないかぎり永続的に保存されるストレージです。localStorageに保管されたデータはセッションをまたいでも、ウィンドウを閉じても、ブラウザやパソコンを再起動しても失われません。簡単に使い方をまとめると下記のようになります。
localStorageに値をセットする
localStorage.setItem("title", "セプテーニエンジニアブログ");
上記ではsetItemというメソッドを使用し値をセット。
localStorageに値を取得する
var title = localStorage.getItem("title");
getItemというメソッドを使用し値を取得。
localStorageから値を削除する
localStorage.removeItem("title");
ストレージの値を削除する場合はremoveItemメソッドを使用します。
上記の様にグローバル変数localStorageに対してメソッドを用いて値をセットするだけです。
どうやら現在のところモダンブラウザではWeb Storageに対応している様なのでHTML5のAPIの中では比較的安心して使用できるようなので次回のWeb Storageエントリーではサンプルを作ってみようと思います。
