Comment définir le délai d'expiration des éléments de stockage local

Comment définir le délai d'expiration du stockage local nécessite des exemples de code spécifiques

Avec le développement rapide d'Internet, le développement front-end nécessite souvent la sauvegarde des données dans le navigateur. Localstorage est une API Web couramment utilisée qui vise à fournir un moyen de stocker des données localement dans le navigateur. Cependant, le stockage local ne fournit pas de moyen direct de définir le délai d'expiration. Cet article explique comment définir le délai d'expiration du stockage local à travers des exemples de code.

Avant de commencer, nous devons d'abord comprendre l'utilisation de base du stockage local. Vous pouvez utiliser les deux méthodes suivantes pour faire fonctionner localstorage :

• localStorage.setItem(key, value) : stockez la paire clé-valeur spécifiée dans localstorage.
localStorage.setItem(key, value)：将指定的键值对存储在localstorage中。
• localStorage.getItem(key)：从localstorage中获取指定键的值。

需要注意的是，localstorage存储的值只能是字符串类型。如果需要存储其他类型的值，可以使用JSON.stringify()方法将其转换为字符串，然后在取出时使用JSON.parse()方法将其转换回原始类型。

接下来，我们将使用localstorage实现设置过期时间的功能。我们可以通过在存入数据时，同时存入一个过期时间戳，然后在取出数据时判断是否已经过期。下面是一个示例代码：

// 设置localstorage的过期时间
function setLocalStorageWithExpiration(key, value, expirationMinutes) {
  const expirationMS = expirationMinutes * 60 * 1000;
  const record = {
    value: value,
    expiration: new Date().getTime() + expirationMS
  };
  localStorage.setItem(key, JSON.stringify(record));
}

// 获取localstorage的值（同时判断是否过期）
function getLocalStorageWithExpiration(key) {
  const record = JSON.parse(localStorage.getItem(key));
  if (!record) {
    return null;
  }
  if (new Date().getTime() > record.expiration) {
    localStorage.removeItem(key);
    return null;
  }
  return record.value;
}

// 使用示例
setLocalStorageWithExpiration('username', 'John', 5); // 设置过期时间为5分钟
console.log(getLocalStorageWithExpiration('username')); // 输出：John

// 5分钟后
setTimeout(() => {
  console.log(getLocalStorageWithExpiration('username')); // 输出：null
}, 5 * 60 * 1000);

在上述示例中，setLocalStorageWithExpiration函数用于设置localstorage的过期时间。它接受三个参数：键名key、键值value和过期时间expirationMinutes（以分钟为单位）。其中，过期时间通过计算当前时间加上指定的分钟数得出，然后将键值对及过期时间存储在localstorage中。

getLocalStorageWithExpiration函数用于获取localstorage的值，并判断其是否过期。它首先从localstorage中获取指定键的值，并将其解析为一个对象。然后判断对象是否存在，如果不存在或已经过期，则返回null；如果未过期，则返回键值。

在示例中，我们设置了一个名为'username'的键值对，并将过期时间设置为5分钟。在设置完毕后，我们通过getLocalStorageWithExpiration函数获取'username'的值并打印到控制台，可以看到输出为'John'。然后，我们使用setTimeoutlocalStorage.getItem(key) : récupère la valeur de la clé spécifiée à partir de localstorage.

Il est à noter que la valeur stockée dans localstorage ne peut être que de type chaîne. Si vous devez stocker une valeur d'un autre type, vous pouvez utiliser la méthode JSON.stringify() pour la convertir en chaîne, puis utiliser la méthode JSON.parse() pour la reconvertir au type d'origine lors de sa suppression. .

Ensuite, nous utiliserons le stockage local pour implémenter la fonction de réglage du délai d'expiration. Nous pouvons stocker un horodatage d'expiration lors du stockage des données, puis déterminer s'il a expiré lors de la récupération des données. Voici un exemple de code : 🎜rrreee🎜Dans l'exemple ci-dessus, la fonction setLocalStorageWithExpiration est utilisée pour définir le délai d'expiration du stockage local. Il accepte trois paramètres : le nom de la clé, la valeur de la clé et le délai d'expiration expirationMinutes (en minutes). Parmi eux, le délai d'expiration est calculé en ajoutant l'heure actuelle et le nombre de minutes spécifié, puis la paire clé-valeur et le délai d'expiration sont stockés dans le stockage local. La fonction 🎜🎜getLocalStorageWithExpiration est utilisée pour obtenir la valeur du stockage local et déterminer s'il a expiré. Il obtient d'abord la valeur de la clé spécifiée à partir du stockage local et l'analyse en un objet. Déterminez ensuite si l'objet existe. S'il n'existe pas ou a expiré, renvoyez null s'il n'a pas expiré, renvoyez la valeur de la clé. 🎜🎜Dans l'exemple, nous configurons une paire clé-valeur appelée « nom d'utilisateur » et fixons le délai d'expiration à 5 minutes. Après la configuration, nous obtenons la valeur de « nom d'utilisateur » via la fonction getLocalStorageWithExpiration et l'imprimons sur la console. Vous pouvez voir que la sortie est « John ». Ensuite, nous utilisons la fonction setTimeout pour simuler l'obtention à nouveau de la valeur de « nom d'utilisateur » après 5 minutes et l'imprimer sur la console. Vous pouvez voir que la sortie est nulle, indiquant que la valeur-clé. la paire a expiré et a été supprimée. 🎜🎜Grâce à l'exemple ci-dessus, nous avons implémenté avec succès la fonction d'utilisation du stockage local pour définir le délai d'expiration. Il convient de rappeler que l'utilisation du stockage local comporte certains risques car il est stocké dans le navigateur client. Par conséquent, lorsque vous utilisez le stockage local pour stocker des informations sensibles ou des données importantes, veuillez faire attention à la sécurité et à la confidentialité des données. 🎜

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!