保存在本地存储中并过期

在开发 Web 应用程序时，我们通常需要将某些数据保存在用户的本地浏览器中。这些数据可能是用户的偏好设置、缓存数据或授权令牌等信息。本地存储提供了一种简单、安全和高效的方式来保存这些数据并在需要时使用它。

除了将数据保存在本地存储中，我们还经常需要在一定时间后使其过期并自动删除。这样做可以避免数据如无限增长而导致存储崩溃的情况发生。在本文中，我们将介绍一些在 Web 应用程序中实现本地存储和过期数据的方法。

1. 使用 Web Storage API

Web Storage API 是一个浏览器内置的存储机制，用于将键值对数据存储在本地存储或会话存储中。我们可以使用它来存储用户的偏好设置、缓存数据或授权令牌等信息。

1.1 localStorage

localStorage 是一种持久化存储机制，数据将一直保留在用户的浏览器中，即使用户关闭浏览器或计算机重启。我们可以使用 localStorage 对象来读取、写入和删除存储在本地的数据。

写入数据

localStorage.setItem('myKey', 'myValue');

读取数据

let value = localStorage.getItem('myKey');
console.log(value); // 'myValue'

删除数据

localStorage.removeItem('myKey');

1.2 sessionStorage

sessionStorage 是一种会话级别的存储机制，数据将在用户关闭浏览器窗口或标签页后自动删除。我们可以使用 sessionStorage 对象来读取、写入和删除存储在本地的数据。

写入数据

sessionStorage.setItem('myKey', 'myValue');

读取数据

let value = sessionStorage.getItem('myKey');
console.log(value); // 'myValue'

删除数据

sessionStorage.removeItem('myKey');

2. 使用 Cookies

Cookies 是一种存储在浏览器中的小型文本文件，可以存放用户的偏好设置、缓存数据或授权令牌等信息。我们可以使用 document.cookie 属性来读取、写入和删除存储在本地的数据。

写入数据

document.cookie = 'myKey=myValue; expires=Thu, 01 Jan 2099 00:00:00 UTC; path=/';

读取和删除数据

由于 document.cookie 属性返回整个 cookie 字符串，因此读取和删除 cookie 数据需要一些额外的操作。

读取数据

function getCookie(name) {
  const cookies = document.cookie.split(';');
  for (let i = 0; i < cookies.length; i++) {
    const cookie = cookies[i].trim();
    if (cookie.startsWith(name + '=')) {
      return cookie.substring(name.length + 1);
    }
  }
  return null;
}

let value = getCookie('myKey');
console.log(value); // 'myValue'

删除数据

document.cookie = 'myKey=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/';

总结

在本文中，我们介绍了使用 Web Storage API 和 Cookies 两种方法来实现本地存储和过期数据。我们可以根据应用场景和需求选择适当的存储机制和过期策略。

需要注意的是，在使用 Cookies 时，我们需要特别注意安全性和隐私保护，如使用 HttpOnly、Secure 和 SameSite 等属性来加强安全保护。