localStorage はブラウザに備わっている属性で、読み取り専用の localStorage 属性は、Document のソース（origin）のオブジェクトストレージにアクセスすることを許可します。保存されたデータはブラウザのセッションに保持されます。localStorage は sessionStorage に似ていますが、その違いは、localStorage に保存されたデータは長期間保持されることです。一方、ページセッションが終了すると、つまりページが閉じられると、sessionStorage に保存されたデータは消去されます。
データが localStorage に保存されるか sessionStorage に保存されるかに関わらず、それらはページのプロトコルに特有であることに注意が必要です。
また、localStorage のキーと値のペアは常に文字列の形式で保存されます。（注意が必要なのは、js オブジェクトと比較して、キーと値のペアが常に文字列の形式で保存されることは、数値型が自動的に文字列型に変換されることを意味します。）
localStorage の使用は非常に簡単で、保存と読み取りに分かれ、イベントメソッドにバインドすることができます。
// 保存
const arr= 100;
localStorage.setItem("key", JSON.stringify(arr));
// 読み取り
const arr = JSON.parse(localStorage.getItem("key"));
ここで "key" はブラウザに保存されるパラメータ名を指し、arr はパラメータ値です。
localStorage.setItem("key", JSON.stringify(arr));このメソッドは配列 arr をブラウザの localStorage に保存し、そのパラメータ名は key です。const arr = JSON.parse(localStorage.getItem("key"));はブラウザ内のパラメータ名が key のパラメータ値を読み取ります。
例えば、特定の設定パラメータを静的に保存する場合、それを配列に書き込み、localStorage に保存することができます。元々はリフレッシュするとデフォルト設定が表示されますが、今では毎回リフレッシュする際に保存されたパラメータを読み取ることができます。
いくつかのシーンでは非常に便利です。例えば、油猴スクリプトを開発するなどです。
localStorage をクリアするには、すべての保存値をクリアする方法と、特定のキーをクリアする方法があります。
// ローカルストレージ内のすべての値をクリア
localStorage.clear();
// ローカルストレージから特定の項目を削除
localStorage.removeItem(key);