Gérer et définir la période de validité du stockage local

Pour comprendre le délai d'expiration du stockage local et comment le gérer, des exemples de code spécifiques sont nécessaires

Dans le développement front-end moderne, le stockage local est un concept très important. Parmi eux, le stockage local est la méthode de stockage local la plus couramment utilisée. Il enregistre les données dans l'environnement local du navigateur pour une utilisation ultérieure. Cependant, lors de l'utilisation du stockage local, nous devons également prendre en compte le délai d'expiration des données et la manière de gérer ces données.

Localstorage n'a pas de mécanisme natif de réglage du délai d'expiration. Par défaut, les données stockées dans le stockage local resteront dans le navigateur de l'utilisateur jusqu'à ce que l'utilisateur les efface manuellement ou que le cache du navigateur soit vidé. Cependant, dans de nombreuses applications pratiques, nous devons généralement définir le délai d'expiration des données pour garantir leur actualité.

Lorsqu'il s'agit du délai d'expiration des données de stockage local, la méthode courante consiste à le gérer en ajoutant un horodatage (timestamp) ou un horodatage d'expiration (expiration timestamp). Un horodatage est un nombre qui représente l'heure actuelle, généralement représenté à l'aide d'un horodatage Unix, qui correspond au nombre de secondes écoulées depuis 00:00:00 le 1er janvier 1970. En comparant l'heure actuelle avec l'horodatage stocké, nous pouvons déterminer si les données ont expiré.

Ce qui suit est un exemple de code qui montre comment définir et gérer le délai d'expiration des données de stockage local :

// 设置localstorage数据，并添加过期时间
function setLocalStorageData(key, value, expirationHours) {
  const expirationMS = expirationHours * 60 * 60 * 1000; // 将小时转换为毫秒
  const expirationTime = Date.now() + expirationMS; // 计算过期时间戳
  const data = {
    value: value,
    expirationTime: expirationTime
  };
  localStorage.setItem(key, JSON.stringify(data));
}

// 获取localstorage数据，并检查是否过期
function getLocalStorageData(key) {
  const data = JSON.parse(localStorage.getItem(key));
  if (data && data.expirationTime && data.expirationTime > Date.now()) {
    return data.value;
  }
  return null; // 数据已过期或不存在时返回null
}

// 示例用法
setLocalStorageData('username', 'JohnDoe', 24); // 设置一个过期时间为24小时的数据
const username = getLocalStorageData('username'); // 获取数据
console.log(username); // 输出 "JohnDoe"

setTimeout(() => {
  const expiredUsername = getLocalStorageData('username'); // 延迟后再次获取数据
  console.log(expiredUsername); // 输出 null，数据已过期
}, 25 * 60 * 60 * 1000); // 延迟25小时

Dans l'exemple de code ci-dessus, nous utilisons la méthode setLocalStorageData pour définir les données de stockage local et ajouter un délai d'expiration. Dans cette méthode, nous convertissons d'abord les heures expirées en millisecondes et obtenons l'horodatage actuel via la méthode Date.now(). Ensuite, nous enregistrons les données et l'horodatage d'expiration calculé dans un objet, puis sérialisons l'objet dans une chaîne via la méthode JSON.stringify et le stockons dans le stockage local. setLocalStorageData方法来设置localstorage数据，并添加一个过期时间。在这个方法中，我们先将过期的小时数转换为毫秒，并通过Date.now()方法获取当前时间戳。然后，我们将数据和计算得到的过期时间戳保存在一个对象中，并通过JSON.stringify方法将对象序列化成字符串后存储在localstorage中。

同时，我们还编写了getLocalStorageData方法来获取localstorage数据，并检查数据是否过期。在这个方法中，我们首先通过JSON.parse方法将localstorage数据解析成一个对象。然后，我们检查解析的对象中是否有过期时间戳，并且过期时间戳是否大于当前时间戳。如果数据未过期，则返回数据的值；否则，返回null。

示例的最后部分展示了如何使用这两个方法。我们首先使用setLocalStorageData方法设置一个过期时间为24小时的数据。然后，通过getLocalStorageData方法获取这个数据，并将结果打印到控制台中。接着，我们使用setTimeout函数延迟执行代码，并在代码中使用getLocalStorageData

Dans le même temps, nous avons également écrit la méthode getLocalStorageData pour obtenir les données de stockage local et vérifier si les données ont expiré. Dans cette méthode, nous analysons d'abord les données de stockage local dans un objet via la méthode JSON.parse. Nous vérifions ensuite s'il existe un horodatage d'expiration dans l'objet analysé et si l'horodatage d'expiration est supérieur à l'horodatage actuel. Si les données n'ont pas expiré, la valeur des données est renvoyée ; sinon, null est renvoyé.

La dernière partie de l'exemple montre comment utiliser ces deux méthodes. Nous utilisons d'abord la méthode setLocalStorageData pour définir une donnée avec un délai d'expiration de 24 heures. Ensuite, obtenez ces données via la méthode getLocalStorageData et imprimez le résultat sur la console. Ensuite, nous utilisons la fonction setTimeout pour retarder l'exécution du code, et utilisons la méthode getLocalStorageData dans le code pour obtenir à nouveau les données. Puisque notre délai dépasse le délai d’expiration des données, le résultat obtenu est nul, indiquant que les données ont expiré. 🎜🎜Grâce à l'exemple de code ci-dessus, nous pouvons apprendre à définir et gérer le délai d'expiration des données de stockage local. En ajoutant des horodatages ou des horodatages d'expiration, nous pouvons contrôler efficacement l'actualité des données et améliorer la fiabilité et les performances des applications. Bien entendu, dans les applications réelles, nous devrons peut-être également prendre en compte d'autres facteurs, tels que les mécanismes de mise à jour des données et les stratégies de mise en cache, pour mieux gérer les données de stockage local. 🎜

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!