Web Storage使用上の注意点
Web Storage（localStorageやsessionStorage）仕様が公開された当初はクッキーに替わる手段として、localStorageを使ったパフォーマンス向上テクニックが多数公開されましたが、パフォーマンスの観点から言えば大容量のファイル保存には向いていません。
先に結論から書くと、従来クッキーで行っていたようなユーザーの状態（アクティブなタブや、ソート順、メニューの開閉など）など軽量の保存には良いが、画像などファイルサイズが大きな物の保存はパフォーマンス低下の原因になり兼ねないので避けたほうが無難です。
使用上の注意点
- localStorageの読込は同期的
-
ページ読込時にlocalStorageに保存したものが自動的に読み込まれます。
head要素内にscript要素を配置した時と同様に、読込が完了するまでページのレンダリングがブロックされます。 - データ保存・取得はメソッドを使う
-
データの保存・取得はgetItem()、setItem()などを使いましょう。
プロパティやハッシュでアクセスもできますが、ブラウザ毎に挙動が異なるため非推奨です。
// 推奨 localStorage.setItem( 'hogeData', 'hoge' ); // 非推奨 localStorage.hogeData = 'hoge'; localStorage[ 'hogeData' ] = 'hoge';
- オブジェクトの保存は一手間必要
-
Web Storageに保存する際に、全ての値は内部的にtoString()で文字列に変換して後に保存されます。
つまり、オブジェクトをそのまま保存しても文字列に変換されてしまい、意図した通りに保存・取得出来ません。var obj = { 'hoge': 'fuga' }; // オブジェクトが保存・取得出来ない例 localStorage.setItem( 'hogeData', obj ); localStorage.getItem( 'hogeData' ); // -> "[object Object]" // オブジェクト保存・取得可能 localStorage.setItem( 'hogeData', JSON.stringify(obj) ); JSON.parse( localStorage.getItem('hogeData') ); // -> { 'hoge': 'fuga' } - sessionStorageはブラウザのタブを越えて利用出来ない
-
タブAとタブBで同一サイトを開いている場合でも、タブAでsessionStorageに保存したデータをタブBで取得・利用する事ができません。
Web Storageの良い点
仕様上、大容量ファイルの記憶に向いてはいませんがWeb Storageそのものが悪いわけではありません。
- とにかく簡単に利用可能
-
keyとvalueのペアで簡単に保存出来ます。
取得・削除はkeyを使って行います。// 保存 //localStorage.setItem( 'key', 'value' ); localStorage.setItem( 'hogeData', 'hoge' ); localStorage.setItem( 'fugaData', 'fuga' ); // 取得 //localStorage.getItem( 'key' ); localStorage.getItem( 'hogeData' ); // 削除 localStorage.removeItem( 'hogeData' ); // 全データ消去 localStorage.clear();
- HTTPヘッダーで送信しない
-
クッキーに保存した場合は、HTTPリクエスト時に都度HTTPヘッダーにクッキー内容が含まれて送信されるため、保存するデータに個人情報が含まれるとセキュリティ上望ましくありません。
localStorageの場合、HTTPヘッダーで送信されないためクッキーのようなHTTPリクエスト時の情報漏えいリスクが無く、送受信するデータも若干（クッキー分）少なくなります。 - 保存容量が大きい
-
クッキーの4kbに対して、Web Storageは5MBまで保存可能です。
ただし、先述したパフォーマンス上の理由により、あまり大きなものを保存するのはオススメできません。
※保存上限はブラウザ、バージョンによって前後する事があります - sessionStorageはブラウザを終了すれば削除される
-
以前、ブラウザの設定で起動時に前回のタブを復元する設定にしているとセッションクッキーが生存すると紹介しましたが、sessionStorageの場合は前回のタブを復元する設定にしていても削除されます。
まとめ
- Web Storageは読込が同期的である事に留意して、使い方を間違わなければ（数十kbの保存であれば）十分に有用。
- オブジェクトの保存は一手間加える。
- sessionStorageは同一タブでしか使用できないことに注意。ただ、セッションクッキーと異なりブラウザの設定を問わず、ブラウザ終了時に削除される。