ローカルストレージの使い方

localstorage の使用方法: 1. localstorage にデータを保存する; 2. localstorage からデータを取得する; 3. 保存されているデータを更新する; 4. データを削除する; 5. localstorage をクリアする; 6. localstorage が利用可能かどうかを確認する; 7 . 複雑なオブジェクトを保存および取得します。詳細な紹介: 1. データをローカルストレージに保存する、データをローカルストレージに保存するなど。

#`localStorage` は、クライアント ブラウザーにデータを保存する Web API です。これは、ブラウザにデータを保存するために使用できるシンプルなキーと値のストレージ システムを提供し、異なるページ間またはブラウザ セッション間でデータを保持できるようにします。 `localStorage` の詳しい使い方は次のとおりです:

1. `localStorage` にデータを保存する

データを `localStorage` に保存するには、`localStorage.setItem を使用する必要があります。 (key, value)` メソッド。ここで、`key` は保存されるデータのキーであり、`value` は保存されるデータの値です。例:

localStorage.setItem("username", "john_doe");

これにより、ユーザー名「john_doe」が `localStorage` に保存され、キー「username」に関連付けられます。

2. `localStorage` からデータを取得する:

`localStorage` からデータを取得するには、`localStorage.getItem(key)` メソッドを使用できます。取得したデータのキー。例:

const username = localStorage.getItem("username");
console.log(username); // 输出 "john_doe"

これは、`localStorage` に保存されている「username」データを取得し、それを `username` 変数に割り当てます。

3. 保存されたデータの更新:

`localStorage` に保存されたデータを更新したい場合は、`setItem()` メソッドを使用して、同じキー値に新しいものを指定するだけです。 。古い値は新しい値に置き換えられます。例:

localStorage.setItem("username", "jane_doe");

これにより、以前に保存された「john_doe」が新しい値「jane_doe」に置き換えられます。

4. データの削除:

`localStorage` からデータを削除するには、`localStorage.removeItem(key)` メソッドを使用できます。ここで、`key` は削除するデータのキーです。削除される。例:

localStorage.removeItem("username");

これにより、`localStorage` に保存されている「ユーザー名」データが削除されます。

5. `localStorage` のクリア:

`localStorage` に保存されているすべてのデータを一度に削除する必要がある場合は、`localStorage.clear()` メソッドを使用できます。これにより、「localStorage」全体がクリアされます。例:

localStorage.clear();

6. `localStorage` が利用可能かどうかを確認します:

`localStorage` を使用する前に、ブラウザがサポートしているかどうかを確認することをお勧めします。 「localStorage」へのアクセスが無効になる可能性があります。次のコードを使用して、`localStorage` が利用可能かどうかを確認できます:

if (typeof Storage !== "undefined") {
  // 支持 localStorage
  // 在这里使用 localStorage 的操作
} else {
  // 不支持 localStorage
  console.log("对不起，您的浏览器不支持 localStorage。");
}

7. 複雑なオブジェクトの保存と取得:

`localStorage` は文字列のみを保存できるため、保存および取得したい場合は、複雑なオブジェクトの取得 オブジェクト (JavaScript オブジェクトや配列など) は、文字列にシリアル化してから、保存および取得中に逆シリアル化する必要があります。通常、シリアル化には「JSON.stringify()」メソッドが使用され、逆シリアル化には「JSON.parse()」メソッドが使用されます。

たとえば、複数のプロパティを持つ JavaScript オブジェクトを保存する場合:

const user = {
  username: "jane_doe",
  email: "jane@example.com"
};
localStorage.setItem("user", JSON.stringify(user));
然后，当你需要检索它时，将其从字符串反序列化回对象：
const storedUser = JSON.parse(localStorage.getItem("user"));
console.log(storedUser.username); // 输出 "jane_doe"

注意事項と制限事項:

「localStorage」は便利なクライアント ストレージ ソリューションですが、ただし、いくつかの制限と注意事項があります:

-容量制限: 各ドメイン名の `localStorage` のストレージ容量は通常約 5MB で、ブラウザーによって多少の違いがある場合があります。この容量制限を超えると、ブラウザはユーザーにストレージをクリアするか、「localStorage」を無効にするように求めるメッセージを表示することがあります。

-同一生成元ポリシー: `localStorage` は同一生成元ポリシーに従います。つまり、同じドメイン名のページのみが同じ `localStorage` データにアクセスできます。異なるドメイン名のページは「localStorage」を共有できません。

-データ型の制限: `localStorage` は文字列のみを保存できるため、非文字列データ (オブジェクト、配列など) は保存用に文字列にシリアル化し、取得時に逆シリアル化する必要があります。

- プライバシーとセキュリティ: 「localStorage」はクライアント ブラウザに保存されるため、パスワードやトークンなどの機密情報の保存には適していません。機密情報はサーバー側に保存され、安全な通信プロトコルを使用して送信される必要があります。

-データの永続性: データはクライアント側に保存されるため、ユーザーがブラウザを閉じたりコンピュータを再起動したりしても、データは明示的に削除されるまで残ります。これを使用して、永続的な設定またはローカル キャッシュを作成できます。

一般に、「localStorage」はシンプルで強力なクライアント側ストレージ ツールであり、小さなデータ、ユーザー設定、ローカル キャッシュ、その他のシナリオの保存に適しています。ただし、使用する場合は、容量制限とセキュリティの問題、およびシリアル化と逆シリアル化の要件に注意してください。より高度なクライアント側ストレージ ソリューションが必要な場合は、IndexedDB や Web SQL などのテクノロジの使用を検討することもできます。

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