玩转浏览器本地存储，自制 localStorage 库，掌握过期时间

2023-11-22 14:48:29

使用封装的 localStorage 存储数据

localStorage 是一种在浏览器中存储数据的强大机制，即使页面刷新或关闭后也能访问这些数据。然而，它也存在一些局限性，如缺乏过期时间和操作数据的方法。

为了解决这些问题，我们可以封装 localStorage，创建具有过期时间和数据操作方法的库。本文将深入探讨如何创建和使用这样的封装库，以在浏览器中有效地存储和管理数据。

封装 localStorage

通过创建一个构造函数，我们可以封装 localStorage。这个构造函数将接受 localStorage 的名称作为参数，并在其中存储数据。

function LocalStorageDAO(name) {
  this.name = name;
  this.storage = window.localStorage;
}

设置过期时间

通过封装，我们添加了一个设置过期时间的方法。此方法接受三个参数：键、值和过期时间。过期时间指定数据在被自动删除之前可以存在多长时间。

LocalStorageDAO.prototype.setExpiration = function(key, value, expiration) {
  const now = Date.now();
  const expirationDate = new Date(now + expiration);
  this.storage.setItem(key, JSON.stringify({ value, expirationDate }));
};

获取数据

通过封装，我们可以添加一个获取数据的方法。此方法接受键作为参数，并返回与该键关联的值，前提是它尚未过期。

LocalStorageDAO.prototype.get = function(key) {
  const data = this.storage.getItem(key);
  if (!data) {
    return null;
  }

  const parsedData = JSON.parse(data);
  const now = Date.now();
  if (parsedData.expirationDate < now) {
    this.remove(key);
    return null;
  }

  return parsedData.value;
};

更新数据

通过封装，我们可以添加一个更新数据的方法。此方法接受键、值和过期时间作为参数。如果数据已存在，它将被更新；否则，它将被创建。

LocalStorageDAO.prototype.update = function(key, value, expiration) {
  this.remove(key);
  this.setExpiration(key, value, expiration);
};

删除数据

通过封装，我们可以添加一个删除数据的方法。此方法接受键作为参数，并从存储中删除与该键关联的值。

LocalStorageDAO.prototype.remove = function(key) {
  this.storage.removeItem(key);
};

使用封装库

现在，我们可以使用封装库轻松地存储和管理数据。

const dao = new LocalStorageDAO('my-data');
dao.setExpiration('key', 'value', 1000 * 60 * 60);
const value = dao.get('key');
dao.update('key', 'new value', 1000 * 60 * 60);
dao.remove('key');