WebStorageについて（HTML）

勉強したはずなのにズッコケた、
Webデザイン技能検定の筆記試験復習シリーズ。
（令和元年度第３回）

HTML5のAPIであるWeb Storageについて。

（１）sessionStorageについて

　key-value型のデータ保存形式

　データ：ウィンドウやタブを閉じるまで有効

　別ウィンドウでのデータ共有：×

　ウィンドウ間でデータが共有されることはない。

（２）localStorageについて

　key-value型のデータ保存形式

　データ：永続的に有効

　別ウィンドウでのデータ共有：〇

「http://www.example.com:80」のような
「プロトコル://ドメイン名:ポート番号」（オリジン）
単位で有効なため、アドレスが同じであれば
ウィンドウ別でもデータは共有できる。
ブラウザを終了してもデータは保存される。

（３）Cookieとの違い

データの有効期限が「ウィンドウ単位」「永続的」でなく
「一定期間」（時間単位）

（４）APIへの命令の出し方

　①getItem(key)
　keyに対応するvalueを取得する

　②setItem(key, value)
　keyとvalueをペアにしてデータを保存する

　③removeItem(key)
　keyに対応するvalueを削除する

　④clear()
　データをすべてクリアする

　⑤length
　保存されているデータの数を返す

　⑥key(n)
　保存されているn番目のkeyを返す

（例）

//変数storageにsessionStorageを格納
var storage = sessionStorage;

//useridというキーに1111という値を割り当てて保存
storage.setItem('userid', '1111');

//後からvalueを変更してセットし直せば上書き保存される
storage.setItem('userid', '2222');

//useridというキーの値を取得する（2222が返るはず）
storage.getItem('userid');

//useridというキーの値を削除する
storage.removeItem('userid');

//ストレージに保存されているデータをすべてクリアする
storage.clear();

【出典】

Web Storage−HTML5のAPI、および、関連仕様