Cookieに変わる後継技術、localStorageを試してみたらいい感じだった件

Web,HTML,JavaScript | 2012年9月8日

HTML5で規定されている Web Storage（DOMストレージ） と呼ばれる機能、恥ずかしながら今まで知りませんでした(´・ω・｀)

早速試してみたのでその感想など・・・。

 

そもそもWeb Storageとは？

ブラウザからアクセスできるストレージ（データ保存場所）のことで、Cookie（クッキー）と同等のことが行えます。

Web Storageには localStorage と sessionStorage の2種類があり、データの有効な範囲や破棄されるタイミングが異なってきます。

詳細はこちらへ。　→ブラウザでストレージ？ Web Storageを使いこなそう

 

localStorage、sessionStorageの使い方

localStorage、sessionStorageにアクセスするにはJavaScriptを使います。

localStorageにデータを保存する

<script type="text/javascript">
localStorage.setItem( key, value );
// localStorage.key = value; でも可
// localStorage[key] = value; でも可
</script>

localStorageのデータを取り出す

<script type="text/javascript">
var value = localStorage.getItem( key );
// var value = localStorage.key; でも可
// var value = localStorage[key]; でも可
</script>

localStorageのデータを消去する

<script type="text/javascript">
localStorage.removeItem( key );
</script>

localStorageのデータを全て表示する

<script type="text/javascript">
for( i=0; i<localStorage.length; i++ ) {
  document.write( localStorage.getItem( localStorage.key(i) ) + '<br>' );
}
</script>

localStorageのデータを全て消去する

<script type="text/javascript">
localStorage.clear();
</script>

 

sessionStorageの場合

前述したコードの「localStorage」と記載した箇所を「sessionStorage」に置き換えれば動作します。

 

localStorageとsessionStorageの違い

それぞれの違いをまとめてみました。

	localStorage	sessionStorage
データが取得できる範囲	同一のドメインとポート番号	同一のドメインとポート番号で、現在のウィンドウ（タブ）内のみ ※同一ページでも別ウィンドウで開くと取得できない
データの生存期間	永久	ウィンドウ（タブ）を閉じるまで

うん。まとめるほど違いがなかった。。。

ちなみにブラウザのCookieをクリアするとストレージのデータもクリアされるようです。

 

考察

一部のブラウザ（IE7以前など）では使用できないためすべてのCookie処理が置き換わることはありませんが、この使い勝手はとても良いですね。

sessionStorageに関しては別タブで開くとデータが引き継がれないため利用用途がわかりません。使うならほとんどlocalStorageになるのかな？

スマホ限定だったり使用者が限定されるような環境では積極的に利用していこうと思います。