1. まとめトップ

ITP機能追加で頭を悩ませている人達の救世主になりうる「Web Storage」についてまとめてみた

Cookieに代わる機能として期待されているWeb Storageについてまとめてみました。

更新日: 2017年10月29日

0 お気に入り 1407 view
お気に入り追加

この記事は私がまとめました

harunikuさん

ウェブストレージ(Web Storage)とは

HTML5から登場した機能でホームページで扱うデータを保存しておく場所のことです。
ローカルストレージ(localStrage)やセッションストレージ(sessionStrage)と2種類あり、
データの保存・上書き・削除・全クリアなどの操作は、JavaScriptというプログラム言語で行うことができ、Cookieやセッションの代わりになることを期待されている新しい機能のことです。

ローカルストレージ(localStrage)とは

ユーザーのローカル(ブラウザ)にデータを保存することができ、半永久的にデータを保存することができる機能。データの読み込み・更新も比較的簡単に行うことができる。

セッションストレージ(sessionStrage)とは

ユーザーのローカル(ブラウザ)にデータを保存することができ、一時的にデータを保存することができる機能。作業途中のデータや画面遷移時の一時的なデータ保存などに有効活用できます。
ローカルストレージ(localStrage)との違いはデータの有効期限に違いがある。

クッキー(Cookie)とローカルストレージの違い

【通信量の違い】
Cookieはリクエストを投げるたびにCookieの内容をすべてサーバーに送信しているため、トラフィックが増大する。そのため、Cookieに保存するデータ量が多くなればなるほど、サイトが重くなったりするなどの弊害がある。ローカルストレージは、ローカル内だけで完結するため、余計なトラフィックが増えない。

【セキュリティの向上】
Cookieはローカルで保存しておくべきデータでもリクエストのたびに送信しているため、ネットワークの経路上でデータが漏洩する可能性があった。もちろんローカルストレージでも基本的なアクセシビリティはCookieと同じで、XSSなどで盗まれる恐れはある

ウェブストレージ(Web Storage)のプロパティ/メソッド

length → localStorage/sessionStorageに保存されているキーの数を返す。

key(index) → indexを数値で指定。index値に対応するキー(文字列)を返す。

getItem(key) → keyに対応する値を返す。

setItem(key, value) → keyに対し、valueをセットする。valueとしてオブジェクトも含め任意の値を指定できることになっているが、ブラウザ実装では、数値や文字列しか挿入できない。

clear() → localStorage/sessionStorageに保存されているデータをすべて消去する。

removeItem(key) → keyに対応する値を削除する。

ローカルストレージ(localStrage)の利用方法

ローカルストレージ(localStrage)はKVS(Key Value Store)型のデータベースを操作するAPIである。キーと値のペアでデータを管理する。例えば、hogeをキーとして、値testを保存する場合は、以下のように記述する。

// データを保存する。
・localStorage["hoge1"] = "test1";//プロパティ
・localStorage.hoge2 = "test2";
・localStorage.setItem("hoge3", "test3");//メソッドでのアクセッサー

// データを取得する。
・localStorage["hoge1"];
> "test1"
・localStorage.hoge2;
> "test2"
・localStorage.getItem("hoge3");
> "test3"

//保存されている値をすべて表示する
for ( var i = 0, i < localStorage.length; i++ ) {
alert(localStorage.getItem(localStorage.key(i));
}

※ちなみに、localStorage内のすべてのデータの削除は、
localStorage.clear();
と、clear()メソッドを呼べばよい。

ストレージ(Storage)の動作確認をする方法

方法1:ディベロッパーツール
①ブラウザのChromeを開く
②該当サイトのページに到達したらF12キーを押す
③Applicationをクリック
④Storageの▼をクリック

方法2:アドオンを入れる
①ブラウザのChromeを開く
②画面右上の縦並びに3つ並んでいる「・」のアイコンをクリック
③設定
④詳細設定
⑤ユーザーの補助機能を追加
⑥Chrome ウェブストアの検索バーに「Web Storage」と入力
⑦「HTML5 Storage Manager All in One」を拡張機能として追加する

1 2