![見出し画像](https://assets.st-note.com/production/uploads/images/17848621/rectangle_large_type_2_b1e8ad5aff76c146d38b7f7b21a1eeda.png?width=1200)
WebStorageについて(HTML)
勉強したはずなのにズッコケた、
Webデザイン技能検定の筆記試験復習シリーズ。
(令和元年度第3回)
HTML5のAPIであるWeb Storageについて。
(1)sessionStorageについて
key-value型のデータ保存形式
データ:ウィンドウやタブを閉じるまで有効
別ウィンドウでのデータ共有:×
ウィンドウ間でデータが共有されることはない。
(2)localStorageについて
key-value型のデータ保存形式
データ:永続的に有効
別ウィンドウでのデータ共有:〇
「http://www.example.com:80」のような
「プロトコル://ドメイン名:ポート番号」(オリジン)
単位で有効なため、アドレスが同じであれば
ウィンドウ別でもデータは共有できる。
ブラウザを終了してもデータは保存される。
(3)Cookieとの違い
データの有効期限が「ウィンドウ単位」「永続的」でなく
「一定期間」(時間単位)
(4)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();
【出典】
この記事が気に入ったらサポートをしてみませんか?