Comment implémenter le stockage local en javascript

Avec le développement rapide d'Internet, de plus en plus de sites Web adoptent la conception de pages frontales, ce qui entraîne le besoin de stockage de données. De manière générale, nous utilisons des cookies ou localStorage dans le code frontal pour le stockage des données. Cet article explique comment implémenter le stockage local en JavaScript.

Tout d’abord, examinons les différences et les liens entre les cookies et localStorage. Les cookies sont généralement utilisés pour stocker de plus petites quantités de données, telles que les informations de connexion des utilisateurs, etc., tandis que localStorage est une nouvelle norme HTML5 et est utilisé pour stocker de plus grandes quantités de données, telles que les paramètres locaux des utilisateurs, les informations de configuration du site Web, etc. . Dans le même temps, les cookies sont facilement détournés, mais localStorage est plus sécurisé et fiable, nous pouvons donc faire des choix raisonnables en fonction de nos besoins.

Ensuite, voyons comment utiliser JavaScript pour implémenter les opérations localStorage.

1. Écrire des données

Nous pouvons utiliser localStorage.setItem(key, value) pour écrire des données vers et depuis localStorage, où key représente le nom de la clé et value représente la valeur de la clé. Voici un exemple :

localStorage.setItem('name', '张三');
localStorage.setItem('age', '18');

Le code ci-dessus stockera les valeurs de clé avec les noms de clé et leur âge respectivement dans le stockage local.

2. Lire les données

Nous pouvons utiliser localStorage.getItem(key) pour lire la valeur de clé du nom de clé spécifié dans localStorage. Voici un exemple :

var name = localStorage.getItem('name');
var age = localStorage.getItem('age');
console.log(name, age);

Le code ci-dessus affichera respectivement les valeurs clés du nom et de l'âge.

3. Supprimer les données

Nous pouvons utiliser localStorage.removeItem(key) pour supprimer les données avec le nom de clé spécifié dans localStorage. Voici un exemple :

localStorage.removeItem('name');

Le code ci-dessus supprimera les données portant le nom de clé dans le stockage local.

4. Effacer les données

Nous pouvons utiliser localStorage.clear() pour effacer toutes les données du stockage local. Voici un exemple :

localStorage.clear();

Le code ci-dessus effacera toutes les données du stockage local.

5. Détecter si localStorage est pris en charge

Nous pouvons utiliser le code suivant pour détecter si le navigateur actuel prend en charge localStorage :

if (window.localStorage) {
  console.log('localStorage is supported');
} else {
  console.log('localStorage is not supported');
}

Si le navigateur prend en charge localStorage, affichez "localStorage est pris en charge" sinon, affichez "localStorage n'est pas pris en charge" ; ".

6. Définir le délai d'expiration des données

localStorage ne prend pas en charge la définition du délai d'expiration des données par défaut, mais nous pouvons implémenter cette fonction en écrivant notre propre code, par exemple :

// 存储数据，同时存储当前时间戳
localStorage.setItem('name', '张三');
localStorage.setItem('name_time', Date.now());

// 读取数据，同时读取存储的时间戳，如果时间超过10秒，则删除数据
var name = localStorage.getItem('name');
var name_time = localStorage.getItem('name_time');
if (Date.now() - name_time > 10000) {
  localStorage.removeItem('name');
  localStorage.removeItem('name_time');
}

Le code ci-dessus stockera l'horodatage actuel lorsque stocker les données, vérifier le délai d'expiration du stockage lors de la lecture des données et supprimer les données si elles dépassent 10 secondes.

Pour résumer, ce qui précède explique comment JavaScript implémente le stockage local. Nous pouvons utiliser localStorage pour stocker des données, lire des données, supprimer des données, effacer des données et d'autres opérations courantes. Dans le même temps, nous pouvons également écrire du code pour implémenter des fonctions avancées telles que la définition du délai d'expiration des données. L'utilisation de localStorage peut réduire la charge du serveur et améliorer la vitesse des pages et l'expérience utilisateur.

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!