Comment utiliser le stockage local

Comment utiliser le stockage local : 1. Stockez les données dans le stockage local ; 2. Récupérez les données du stockage local ; 3. Mettez à jour les données stockées ; 5. Effacez le stockage local ; 6. Vérifiez si le stockage local est disponible ; objets complexes. Introduction détaillée : 1. Stocker les données dans le stockage local, stocker les données dans le stockage local, etc.

`localStorage` est une API Web qui stocke les données dans le navigateur client. Il fournit un système de stockage clé-valeur simple qui peut être utilisé pour stocker des données dans le navigateur afin qu'elles puissent être conservées entre différentes pages ou entre des sessions de navigateur. Voici la méthode détaillée sur la façon d'utiliser `localStorage` :

1. Stocker les données dans `localStorage`

Pour stocker les données dans `localStorage`, vous devez utiliser la méthode `localStorage.setItem(key, value)`. , où « clé » est la clé des données à stocker et « valeur » est la valeur des données à stocker. Par exemple :

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

Cela stockera le nom d'utilisateur "john_doe" dans `localStorage` et l'associera à la clé "username".

2. Récupérer les données de `localStorage` :

Pour récupérer les données de `localStorage`, vous pouvez utiliser la méthode `localStorage.getItem(key)`, où `key` est la clé des données à récupérer. Par exemple :

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

Cela récupérera les données « nom d'utilisateur » stockées dans « localStorage » et les affectera à la variable « nom d'utilisateur ».

3. Mettre à jour les données stockées :

Si vous souhaitez mettre à jour les données stockées dans `localStorage`, utilisez simplement la méthode `setItem()` et fournissez une nouvelle valeur pour la même clé. L'ancienne valeur sera remplacée par la nouvelle valeur. Par exemple :

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

Cela remplacera le "john_doe" précédemment stocké par la nouvelle valeur "jane_doe".

4. Supprimer des données :

Pour supprimer des données de `localStorage`, vous pouvez utiliser la méthode `localStorage.removeItem(key)`, où `key` est la clé des données à supprimer. Par exemple :

localStorage.removeItem("username");

Cela supprimera les données « nom d'utilisateur » stockées dans « localStorage ».

5. Effacez `localStorage` :

Si vous devez supprimer toutes les données stockées dans `localStorage` en même temps, vous pouvez utiliser la méthode `localStorage.clear()`. Cela effacera tout le « localStorage ». Par exemple :

localStorage.clear();

6. Vérifiez si `localStorage` est disponible :

Avant d'utiliser `localStorage`, il est préférable de vérifier si le navigateur le prend en charge, car dans certains cas, le navigateur peut avoir désactivé l'accès à `localStorage`. . Vous pouvez vérifier si `localStorage` est disponible en utilisant le code suivant :

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

7. Stockage et récupération d'objets complexes :

`localStorage` ne peut stocker que des chaînes, donc si vous souhaitez stocker et récupérer des objets complexes (tels que des objets JavaScript). ou tableaux), ils doivent d'abord être sérialisés en chaînes, puis désérialisés lors du stockage et de la récupération. Généralement, la méthode `JSON.stringify()` est utilisée pour la sérialisation et la méthode `JSON.parse()` pour la désérialisation.

Par exemple, stocker un objet JavaScript avec plusieurs propriétés :

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"

Remarques et limitations :

Bien que « localStorage » soit une solution de stockage pratique côté client, il existe certaines limitations et considérations :

-Limite de capacité : La capacité de stockage de « localStorage » sous chaque nom de domaine est généralement d'environ 5 Mo, et il peut y avoir quelques différences selon les navigateurs. Si cette limite de capacité est dépassée, le navigateur peut demander à l'utilisateur d'effacer le stockage ou de désactiver « localStorage ».

-Même politique d'origine : `localStorage` suit la même politique d'origine, ce qui signifie que seules les pages sous le même nom de domaine peuvent accéder aux mêmes données `localStorage`. Les pages avec des noms de domaine différents ne peuvent pas partager « localStorage ».

-Restriction de type de données : `localStorage` ne peut stocker que des chaînes, donc les données non-chaînes (telles que des objets, des tableaux, etc.) doivent être sérialisées en chaînes pour le stockage, puis désérialisées lors de la récupération.

- Confidentialité et sécurité : étant donné que « localStorage » est stocké dans le navigateur client, il ne convient pas au stockage d'informations sensibles telles que des mots de passe ou des jetons. Les informations sensibles doivent être stockées côté serveur et transmises à l'aide de protocoles de communication sécurisés.

- Persistance des données : les données sont stockées côté client, donc même si l'utilisateur ferme le navigateur ou redémarre l'ordinateur, les données restent jusqu'à ce qu'elles soient explicitement supprimées. Cela peut être utilisé pour créer des paramètres persistants ou des caches locaux.

En général, « localStorage » est un outil de stockage côté client simple et puissant, adapté au stockage de petites données, des paramètres utilisateur, du cache local et d'autres scénarios. Mais faites attention à ses limitations de capacité et à ses problèmes de sécurité, ainsi qu'aux exigences de sérialisation et de désérialisation lors de son utilisation. Si vous avez besoin d'une solution de stockage côté client plus avancée, vous pouvez également envisager d'utiliser des technologies telles que IndexedDB ou Web SQL.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!