JavaScript におけるローカル ストレージを理解する

ローカル ストレージ は、開発者がブラウザ内で直接データを保存、取得、管理できるようにする重要なブラウザベースの API です。セッション ストレージとは異なり、ローカル ストレージはブラウザを閉じた後も存続するため、ユーザー設定、アプリ設定、またはセッション間で維持する必要があるあらゆる種類のデータを保存するのに最適です。ただし、データは保存されているブラウザーに限定されることに注意することが重要です。たとえば、Chrome に保存されたデータは Firefox では利用できません。

ローカルストレージの仕組み

ローカル ストレージを使用する前に、データが JSON 形式 で保存されることを理解することが重要です。つまり、JavaScript オブジェクトを保存する場合は、まずそれを JSON に変換し、データを取得するときに JavaScript オブジェクトに変換し直す必要があります。

これが例です:

const user = {
  name: "AliceDoe"
};
const userToJSON = JSON.stringify(user); // Convert object to JSON

ブラウザでローカル ストレージを表示する

ブラウザの開発者ツールを使用して、ローカル ストレージに保存されているデータを表示および操作できます。簡単なガイドは次のとおりです:

1. 任意の Web ページを右クリックして [検査] を選択するか、F12 キーを押します。
2. アプリケーション タブを開きます。
3. 左側のパネルで、ストレージ セクションの下にある ローカル ストレージ を見つけます。保存されたデータがキーと値のペアとして表示されます。

ローカルストレージに新しいレコードを作成する

データをローカル ストレージに保存するには、次の手順に従います:

const user = {
  name: "AliceDoe"
};

const userToJSON = JSON.stringify(user); // Convert to JSON
localStorage.setItem("user", userToJSON); // Save the item

この例では:

• キーは「user」です。
• 値は、JSON 形式の文字列化されたオブジェクトです。

ローカルストレージからのデータの読み取り

ローカル ストレージからデータを取得する場合は、JSON 文字列を JavaScript オブジェクトに変換し直す必要があります。

const userJSON = localStorage.getItem("user"); // Retrieve data
const userObject = JSON.parse(userJSON); // Convert back to JS object
console.log(userObject); // { name: "AliceDoe" }

ローカルストレージ内の既存データの更新

ローカル ストレージ内のデータの更新は、新しいレコードの作成と似ており、基本的には古いデータを上書きします。

const updatedUser = {
  name: "AliceDoe",
  age: 25
};

const updatedUserJSON = JSON.stringify(updatedUser);
localStorage.setItem("user", updatedUserJSON); // Overwrite the record

ローカルストレージからのデータの削除

最後に、ローカル ストレージからレコードを削除するには、removeItem メソッドを使用します。

localStorage.removeItem("user"); // Remove the "user" record

これにより、「user」キーに関連付けられたレコードが削除されます。

結論

ローカル ストレージは、JavaScript でクライアント側のデータを永続化するための強力で使いやすいツールです。レコードの作成、読み取り、更新、削除の方法を理解することで、ブラウザー セッション間で保持される重要なデータを保存し、ユーザー エクスペリエンスを向上させることができます。ただし、ローカル ストレージは特定のブラウザとドメインに限定されており、暗号化されていないため機密データには使用しないでください。

ローカル ストレージをアプリケーションに組み込むことで、特定のタスクに完全なバックエンド ソリューションを必要とせずに、アプリケーションの機能を向上させることができます。

---

引用:

• MDN Web ドキュメント、「LocalStorage」、https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage

以上がJavaScript におけるローカル ストレージを理解するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。