localStorage vs. sesseionStorage

クローンコードはVanilla JSです.localStorageという概念に直面しています.localStroageの概念はsessionStorageの概念を比較し、まとめた.
その前に、web storageの概念を理解してください.

✔️ web storage

웹 스토리지 (web storage)サーバではなくクライアントへのデータの格納をサポート
これはHTML5の機能です.
基本的には、キー(key)および値(value)からなるデータを記憶することができる.

// 키에 데이터 쓰기
localStorage.setItem("key", value);

// 키로 부터 데이터 읽기
localStorage.getItem("key");

// 키의 데이터 삭제
localStorage.removeItem("key");

// 모든 키의 데이터 삭제
localStorage.clear();

// 저장된 키/값 쌍의 개수
localStorage.length;

⚠️ Data Type

Webストレージ
文字型(string)データ型のみがサポートされています.
それに関連する問題は、JSONの形式でデータを読み書きすれば解決できます.

const TODOS_LS = 'toDos';
let toDos = [];

localStorage.setItem(TODOS_LS, JSON.stringify(toDos));

const parsedToDos = JSON.parse(loadedToDos);

localStorageに書き込むデータJSONの形式でシリアル化される(serialization).
読み出されたデータは、JSONの形式で逆シーケンス化される(deserialization).
元のデータを直接取得できます.
cf.
🍎 CookieWebサーバは、Webブラウザに転送して保存します.
サーバに追加のリクエストがある場合、リクエストがサーバに返される文字列情報.
ブラウザの情報には、Webページにアクセスしたときのアクセスレコードが含まれます.
格納されたテキストファイル.
サーバではなくWebブラウザに格納
要求された情報をサーバに送信して、ユーザーを識別します.
ネットワークストレージとライブラリベースの機能自体は似ています.
しかし、Cookieの記憶空間は約4KBである.
違いは、ネットワーク記憶は、約5KBの記憶領域を使用することができる.
cf.
🍎 web storage latest specs
Webストレージは次のとおりです.localStorageとsessionStorageがあります.
この2つのメカニズムの違いは、データがどの程度の範囲で保持されているかにあります.

✅ Session Storage

sesseionStorage各セッションには、データが個別に格納されます.
セッションを終了すると、自動的にデータが破棄されます.
同じドメインでも、セッションが異なる場合はデータにアクセスできません.

✅ Local Storage

localStorageブラウザにデータを半永久的に保存します.
ブラウザを終了してもデータは保持されます.
ブラウザ自体に半永久的なデータを保持します.
ドメイン(domain)が異なる場合は、localStorageにアクセスできません.
cf.
⚠️ persistencelocal storage同じコンピュータで同じブラウザを使用する場合にのみ適用されます.
同じコンピュータで異なるブラウザ記事を使用するか、別のコンピュータで同じブラウザを使用します.
データが異なるアプライアンスまたはブラウザ間で共有および永続化される必要がある場合.
クラウド(Cloud)プラットフォームまたはデータベース(DB)サーバを使用する必要があります.
📚 Reference
web storage
cookie
local storage vs. session storage