date. 2013/2/27

category. JavaScript

Web Storageの使用方法についてです。

Web Storageとは

Web Storageはブラウザにデータを保存する仕組みです。

以前までのキャッシュに比べ、容量が大きく(5MB)、キーバリュー型で、JavaScriptで容易に操作できるのが特徴です。

また、Web Storageはデータを全てテキストとして保存するので注意が必要です。

Web Storage対応ブラウザ

しかし、この便利なWeb Strageに全てのブラウザが対応しているわけではありません。

  • IE8以降
  • Firefox 3.6以降
  • Chrome 8以降
  • Safari 5以降
  • Opera 11以降

となっております。

現段階で使用する第一候補はスマートフォンがオススメです。

Web Storageの種類

Web Strageには、sessionStorageとlocalStorageの2種類があります。

sessionStorage

sessionStorageは、sessionと同じようにウィンドウ・タブを閉じるまでが有効期限になります。

localStorage

localStorageは、データを永続的に保存することが出来ます。

Web Storageの使用方法

sessionStorageの場合はまず、

var storage = sessionStorage;

とします。

データの取得

sessionStorage

storage.getItem('key');

localStorage

localStorage['key']

データのセット

sessionStorage

storage.setItem('key', '1111');

localStorage

localStorage.setItem('key', '1111')

データの削除

sessionStorage

storage.removeItem('key');

localStorage

localStorage.removeItem('key');

データの全削除

sessionStorage

storage.clear();

localStorage

localStorage.clear();

このように簡単に、Web Storageを使用することが出来ます。

スマートフォン向けに使用し、まるでネイティブアプリの用にしてみるのもいいのかもしれません。

参考サイト

関連記事