localStorage はブラウザに組み込まれた読み取り専用のプロパティであり、localStorage プロパティを使用すると、Document のソース(origin)にアクセスできます。データはブラウザのセッションに保存されます。localStorage は sessionStorage に似ていますが、localStorage に保存されたデータは長期間保持されます。一方、セッションが終了すると(つまり、ページが閉じられると)、sessionStorage に保存されたデータはクリアされます。
注意すべきは、localStorage または sessionStorage にデータを保存する場合、それらはページのプロトコルに固有です。
また、localStorage のキーと値は常に文字列形式で保存されます(数値型は自動的に文字列型に変換されることに注意してください)。
localStorage の使用方法は非常に簡単で、保存と読み取りの 2 つの部分に分けることができます。これらはイベントメソッドにバインドすることもできます。
// 保存
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 をクリアするには、すべての保存値をクリアする方法と特定のキーをクリアする方法があります。
// ローカルストレージのすべての値をクリアする
localStorage.clear();
// ローカルストレージから特定の項目を削除する
localStorage.removeItem(key);