本地存储的正确打开方式，如何避免“假过期”陷阱？

2023-10-10 10:43:24

本地存储（LocalStorage）是前端开发中经常使用的一种存储机制，它允许网页在本地保存数据，即使在浏览器关闭或重新启动后数据也不会丢失。LocalStorage的使用非常简单，只需要通过window.localStorage对象即可存取数据。

LocalStorage的一个重要特性是它不会过期，也就是说，除非主动删除数据，否则数据将一直保存在本地。这在某些情况下非常有用，例如存储用户设置或其他不需要经常更新的数据。

然而，在某些情况下，我们可能需要存储一些会过期的数据，例如购物车中的商品或其他需要在一定时间后失效的数据。这种情况下，我们不能直接使用LocalStorage，而需要使用一些技巧来实现本地存储的过期功能。

实现本地存储过期的技巧

1. 使用时间戳

一种实现本地存储过期的技巧是使用时间戳。我们可以将数据存储在LocalStorage中，同时存储一个时间戳来记录数据创建的时间。当我们需要检查数据是否过期时，我们可以比较当前时间和时间戳，如果当前时间大于时间戳，则说明数据已过期，需要将其删除。

// 设置一个会过期的本地存储数据
localStorage.setItem('cart', JSON.stringify({
  items: [
    {
      name: '商品1',
      price: 100,
      quantity: 1
    },
    {
      name: '商品2',
      price: 200,
      quantity: 2
    }
  ],
  expiresAt: Date.now() + 3600000 // 1小时后过期
}));

// 检查本地存储数据是否过期
const cart = JSON.parse(localStorage.getItem('cart'));
if (Date.now() > cart.expiresAt) {
  // 数据已过期，需要将其删除
  localStorage.removeItem('cart');
}

2. 使用Web Storage API

HTML5的Web Storage API提供了两种存储机制：LocalStorage和SessionStorage。SessionStorage与LocalStorage类似，但它会在浏览器会话结束时清除所有数据。我们可以利用SessionStorage来实现本地存储的过期功能。

// 设置一个会过期的本地存储数据
sessionStorage.setItem('cart', JSON.stringify({
  items: [
    {
      name: '商品1',
      price: 100,
      quantity: 1
    },
    {
      name: '商品2',
      price: 200,
      quantity: 2
    }
  ]
}));

// 当浏览器会话结束时，数据将被清除