開発者ブログ

Web Storage

Last modified by simdy on 2014/06/24, 16:30

Web StorageはCookieよりも大容量でWebブラウザにデータを残せる技術です。HTML5から追加されました。Cookieが1つあたり最大4KBだったのに対し、Web Storageは1オリジンあたり5MBまで保存できます。1オリジンとはURLのスキーマ、ドメイン、ポート番号がユニークなものを指します。例えば以下はすべて別オリジンです。

また、Web StorageはsessionStorageとlocalStorageに分かれます。sessionStorageは1セッション、つまりウィンドウやタブを閉じるまで有効なWeb Storageで、他のタブやウィンドウと共有はできません。localStorageは1オリジンあたり共通で、別ウィンドウやタブと共有して利用できるデータになります。

使い方

sessionStorageまたはlocalStorageで呼び出します。

var strage = sessionStorage;
// または
var strage = localStorage;

メソッドは多くなく、6つだけです。

  • getItem(key) : keyを指定して値を取得
  • setItem(key, value) : keyにvalueを入れる
  • removeItem(key) : keyを指定してデータ削除
  • clear() : 全データ削除
  • keyinformation : i番目のキーを取得
  • length : データの数を取得

アイテムをセット

> strage.setItem("Hello", "World");

アイテムを取得

> strage.getItem("Hello");
"World"

アイテム数を取得

> strage.length
1

キーを取得

> strage.key(0)
"Hello"

すべてのキーと値を取り出す

forループを使ってすべてのキーと値を取り出します。

for (var i = 0; i < strage.length; i++){
  console.log(strage.getItem(strage.key(i)));
}

扱い

Web StorageはKVS(キーバリューストア)になります。キーと値の2つでデータ管理を行うシンプルなデータストアになっています。

注意点

Web Storageに入ったデータは文字列として扱われます。例えば関数も入れられますが、取得時には文字列になっています。

> strage.setItem("Tiger", function(){console.log("Hello World")});
> strage.getItem("Tiger")
"function (){console.log("Hello World")}"

使いどころ

データがサーバに飛ばないということもあって、ローカルの一時データ保管場所として使われるケースが多いようです。データ量も5MBまでになりますので、あまり大容量(動画など)は無理ですが画像であればBase64デコードすれば保存できるでしょう。

フォーム入力時の保存に使ったり、ショッピングカートの一時的な保存場所に使うこともできます。Webアプリケーションはタブを閉じるとすべてデータが消えてしまう可能性があるため、そうしたヒューマンエラー回避策として使ってみるのはいかがでしょう。

補足(hifiveの場合)

hifiveでは型を保持したまま保存、取得ができます。ただしシリアライズできるオブジェクトに限ります(例えば関数型は保存できません)。

h5.api.storage.local.setItem('key3', [10, 'AAA']);
var item = h5.api.storage.local.getItem('key3'); // Array型のオブジェクトを取得できる
console.log(item)  
console.log(item[1]); // AAA

詳しくは11.HTML5APIの利用をご覧ください。


Copyright (C) 2012-2016 NS Solutions Corporation, All Rights Reserved.