localStorage/sessionStorage

私の場合、todoアプリケーションを作成する過程で、閉じてから画面を開いてもリストを保存し、以前はモードレスクローン符号化でlocalstorageを使用したことがあることを望んでいます.
サーバの作成やデータの格納は必要ないようなので、今回もlocalstorageを使うことにしました.
必要に応じて実装されるローカルストレージとセッションストレージを整理して使用します.

Web Storage - local storage / session storage

ストレージが必要なデータをサーバ側に格納する必要がない場合は、サーバ側にデータを格納するのは無駄です.
逆に、クライアント側(ブラウザ)にデータを格納できます.
ローカルストレージとセッションストレージメカニズムの違いは、データがどの程度の範囲で保持されるかです.
セッションストレージは、Webセッションの終了時に保存されたデータを消去しますが、ローカルストレージはWebセッションの終了時にデータを消去しません.
ブラウザが同じWebサイトを複数のラベルまたはウィンドウに配置すると、複数のセッションストレージのデータは互いに分離されて格納され、各ラベルまたはウィンドウが閉じると、格納されたデータも一緒に破棄されます.ローカルストレージの場合、データは複数のタブまたはウィンドウ間で共有され、タブまたはウィンドウを閉じてもブラウザに保持されます.
ただし、ローカルに格納されているデータの永続性は、同じコンピュータ上で同じブラウザを使用する場合にのみ適用されます.
他のデバイスまたはブラウザ間でデータの共有と永続化が必要な場合は、クラウドプラットフォームまたはデータベース・サーバを使用する必要があります.
ローカルストレージとセッションストレージの共通点は、ブラウザにデータを格納することですが、JavaScript APIはまったく同じです.(localStorageセクションをsessionStorageで置き換えると、コードが返されます.)

window.localStorage

Syntax

const storage = window.localStorage;

Value

現在のソースのローカルストレージスペースにアクセスできるストレージオブジェクト.
キーと値: しばしば UTF-16は、文字ごとに2バイトを割り当てる  [DOMString](https://developer.mozilla.org/ko/docs/Web/API/DOMString)形式で保存されます.オブジェクトと同様に、整数キーは自動的に文字列に変換されます.

Method

MethodDescriptionSetItem()ローカルストレージにkeyとvalueを追加します.getItem()キーに一致する値を検索します.removeItem()キーに一致する値を削除します.clear()は、ローカルストレージ内のすべてのコンテンツを削除します.

Example

localStorage.setItem("key","value")

key値とvalue値を使用してlocalStorageを作成する場合.
keyとvalueは文字列として挿入されます.

localStorage.setItem("name","Haesoo");

console.log(localStorage);
// storage {name: 'Haesoo', length: 1}

localStorage.getItem("key")

特定のキーの値を取得する場合.

localStorage.getItem("name");
// 'Haesoo'

localStorage.removeItem("key")

データを削除するとき.

localStorage.removeItem("name");
console.log(localStorage);
// localStorage {length: 0}

localStorage.removeItem("key")

localStorageのすべてのコンテンツを削除する場合.

localStorage.clear();

参考にしてくれた感謝の人々の文章
[JavaScript]Webストレージの使用
JavaScriptでローカルストレージを使用する方法。