session, local Storage

session, local Storage example code https://github.com/SuyeonSun/SessionLocalStorage

Web上でサーバではなくクライアントからデータを格納する方法

のほとんどのデータはデータベースに格納されているため、ローカルおよびセッションを使用して格納される場所は多くありません.
ただし、格納する必要があるデータが重要でない場合や、紛失しても構わない場合は、サーバ側にデータを格納するのは無駄かもしれません.
ex)執筆中に紛失を避けるために一時的に保存する用途、カートや好きな内容などを随時変更する場合、

.

セッションストレージとローカルストレージの違い:

はどの範囲でどのくらい保存されますか?

セッションストレージとローカルストレージの共通点:両方のテクノロジーはブラウザにデータ

を格納する.
1) sessionStorage

ページのセッションが終了すると、格納されたデータは消去されます.
つまり、ブラウザが同じWebサイトを複数のタブまたはウィンドウに配置する場合、
データは分離されて複数のセッションストレージに格納されます.
各ラベルまたはウィンドウが閉じると、保存されたデータも消えます.

2) localStorage

ページのセッションが終了しても、データは消去されません.
ローカルストレージの場合、データは複数のタブまたはウィンドウで共有されます.
タブまたはウィンドウを閉じても、データはブラウザに保持されます.

<セッションストレージ/ローカルストレージサンプルコード>

// 자바스크립트 API가 완전히 동일한 형태이기에 sessionStorage 예제는 localStorage 부분을 sessionStorage로 대체하면 된다.
> localStorage.getItem('name')
null
> localStorage.getItem('email')
null
> localStorage.setItem('email', '[email protected]')
undefined
> localStorage.getItem('email')
"[email protected]"
> localStorage.setItem('email', '[email protected]')
undefined
> localStorage.getItem('email')
"[email protected]"
> localStorage.removeItem('email')
undefined
> localStorage.getItem('email')
null

=>ブラウザで2つのウィンドウを開き、最初にブラウザ1コンソールでlocalStorageを開きます.setItem('email', '[email protected]”),
ブラウザ2でlocalStorageを使用します.getItem(「email」)を使用すると、異なるウィンドウのブラウザでもemailの値を取得できることを確認できます.
=>ただし、同じ方法でブラウザ1コンソール上でセッションストレージを実行します.setItem('email', '[email protected]”),
セッションはブラウザ2に格納されます.getItem(「email」)を使用すると、emailの値は取得できません.
一番上の名前付きコードを表示

for more, refer to https://pygmalion0220.tistory.com/entry/%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%98%EB%B0%8D-SessionStorage