FLINTERS Engineer's Blog

FLINTERSのエンジニアによる技術ブログ

HTML5 - Web Storage

皆さんこんにちわ。@kouhei_mitsuyaです。
今日はHTML5Web 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に対応している様なのでHTML5APIの中では比較的安心して使用できるようなので次回のWeb Storageエントリーではサンプルを作ってみようと思います。