ローカルストレージとセッションストレージとは?
データストレージとセッションストレージとは?
Webストレージにはローカルストレージとセッションストレージを利用するケースがありますが。 よく内容を理解していなかったのでメモを残します。
先に結論
sessionStorage はセッション中(ページの再読み込みや復元を含む、ブラウザーを開いている間)のみデータが保存され、閉じると削除されます。
localStorage は永続的にデータを保存します。(ページを閉じても消されない)
ローカルストレージ
保存場所 -> ブラウザ データの型 -> 文字列のみ(JSON形式の文字列型) 有効期限 -> 消さない限り永久 保存容量 -> 5MB~10MB サーバーでのデータ送信 -> なし 操作方法 -> js (key-value 形式)
ローカルストレージを利用することで、DBへの連携なしてデータを保存できる。 例えば、Amzonでは閲覧した情報をローカルストレージ に保存し次回アクセス時に最近閲覧した商品として表示している。
セッションストレージ
保存場所 -> ブラウザ データの型 -> 文字列のみ 有効期限 -> セッションやタブを閉じるまで 保存容量 -> 5MB~10MB サーバーでのデータ送信 -> なし 操作方法 -> js (key-value 形式)
セッションストレージを利用することでセッションを別にすることができます。
例えば、2つのウィンドウで同じサイトを開きながら航空券を注文する場合、 クッキーでは買い物かご情報が混在してしまって、同じフライトのチケットを気づかずに2枚注文してしまう可能性があります。
Cookie
一応Cookie情報も...
保存場所 -> ブラウザ データの型 -> 文字列のみ 有効期限 -> 任意に設定 保存容量 -> 最大4KB サーバーでのデータ送信 -> 自動送信する 操作方法 -> サーバーサイド言語
ローカルストレージ操作方法
例) key-value形式でjacaScriptで操作する
// Storage.setItem(key, value) // Storage.getItem(key) localStorage.setItem('dummy_key', 'dummy_value'); const item1 = localStorage.getItem('dummy_key'); console.log(item1); // dummy_value sessionStorage.setItem('dummy_key', 'dummy_value'); const item2 = sessionStorage.getItem('dummy_key'); console.log(item2); // dummy_value
参考: Web Storage (localStorage, sessionStorage) の概要と使い方 | Articles | Riotz.works
このサイトにも操作方法が詳しく載っていいる
比較表