技術ブログ

(技術系中心)基本自分用備忘録なので、あくまで参考程度でお願いします。

ローカルストレージとセッションストレージとは?

データストレージとセッションストレージとは?

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

このサイトにも操作方法が詳しく載っていいる

sessionStorageをつかってみる - Qiita

比較表

参考

CookieとWebStorageとSessionについてのまとめ - Qiita

https://webliker.info/how-to-use-localstrage/#toc_11