zishu's blog

zishu's blog

一个热爱生活的博主。https://zishu.me

localStorage の関連利用

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 はパラメータの値です。

  1. localStorage.setItem("key", JSON.stringify(arr)); は、配列 arr をブラウザの localStorage に保存するメソッドであり、パラメータ名は key です。
  2. const arr = JSON.parse(localStorage.getItem("key")); は、パラメータ名が key のブラウザのパラメータ値を読み取るものです。

たとえば、特定の設定パラメータを静的に保存する場合、それを配列に書き込み、localStorage に保存することができます。通常はリフレッシュするとデフォルトの設定が表示されますが、localStorage に保存されたパラメータを読み取ることで、リフレッシュごとに保存されたパラメータを読み取ることができます。

image

これは、ユーザースクリプトなどの開発に非常に便利です。

localStorage をクリアするには、すべての保存値をクリアする方法と特定のキーをクリアする方法があります。

// ローカルストレージのすべての値をクリアする
localStorage.clear(); 

// ローカルストレージから特定の項目を削除する
localStorage.removeItem(key);
読み込み中...
文章は、創作者によって署名され、ブロックチェーンに安全に保存されています。