localstorage过期时间设置

简介

localstorage 是 HTML5 中新增的一种客户端存储方式，与 cookies 相比更加高效，能够存储更多的数据，并且不会在发送 HTTP 请求时传输给服务器。localstorage 中存储的数据是永久性的，一旦存储，除非程序员手动删除，否则将一直存在于浏览器中。

但是，localstorage 中的数据是无法设置过期时间的。一旦存入，就会一直存在，直到程序员手动删除。这对于一些敏感信息的存储，很容易带来一定的风险。那么该如何给 localstorage 中存储的数据设置过期时间呢？

本文就将为大家介绍几种有效的 localstorage 过期时间设置方法。

使用sessionStorage

sessionStorage 具有与 localstorage 类似的存储方式，但是其存储范围只限于当前会话窗口，即当浏览器关闭或者用户主动退出当前页面时，存储在 sessionStorage 中的数据就会被清除。因此，我们可以使用 sessionStorage 来替代 localstorage 进行数据存储，并加入过期时间设置，从而实现 localstorage 的过期时间设置。

// 判断数据是否过期
function isExpired(key) {
  const value = sessionStorage.getItem(key);
  const data = JSON.parse(value);
  if (Date.now() > data.expires) {
    sessionStorage.removeItem(key);
    return true; // 已过期
  }
  return false; // 未过期
}

// 设置数据过期时间
function setWithExpires(key, value, expires) {
  const data = {
    value: value,
    expires: Date.now() + expires
  };
  sessionStorage.setItem(key, JSON.stringify(data));
}

// 获取存储数据
function getWithExpires(key) {
  if (isExpired(key)) {
    return null;
  }
  const value = sessionStorage.getItem(key);
  const data = JSON.parse(value);
  return data.value;
}

// 示例代码
setWithExpires('name', 'alice', 1000); // 存储一个名为'name'的数据，过期时间为1秒
getWithExpires('name'); // 检查'name'是否过期，若未过期，则返回此数据

封装localstorage

我们可以自己封装一个 localstorage，通过在存储数据时加入过期时间的设置来实现 localstorage 的过期时间设置。以下是一个基本的实现方法。

const _localStorage = window.localStorage;

const setWithExpires = (key, value, expires) => {
  const data = {
    value: value,
    expires: Date.now() + expires
  };
  _localStorage.setItem(key, JSON.stringify(data));
};

const getWithExpires = (key) => {
  const value = _localStorage.getItem(key);
  if (!value) {
    return null;
  }

  const data = JSON.parse(value);
  if (Date.now() > data.expires) {
    _localStorage.removeItem(key);
    return null;
  }

  return data.value;
};

// 示例代码
setWithExpires('name', 'alice', 1000); // 存储一个名为'name'的数据，过期时间为1秒
getWithExpires('name'); // 检查'name'是否过期，若未过期，则返回此数据

使用cookie

localstorage 存储的数据虽然不能设置过期时间，但 cookie 可以。因此，我们可以通过 cookie 来存储 localstorage 的 key 值，并在 cookie 中设置过期时间，从而实现 localstorage 的过期时间设置。

以下是一个示例代码：

// 存储数据
function setWithExpires(key, value, expires) {
    const date = new Date();
    date.setTime(date.getTime() + expires);
    document.cookie = `{key}={encodeURI(value)};expires={date.toGMTString()}`;
    window.localStorage.setItem(key, encodeURI(value));
}

// 获取数据
function getWithExpires(key) {
    const value = window.localStorage.getItem(key);
    const arr = document.cookie.match(new RegExp(`(^| ){key}=([^;]*)(;|$)`));
    if (arr) {
        return decodeURI(arr[2]);
    } else {
        return value;
    }
}

// 示例代码
setWithExpires('name', 'alice', 1000); // 存储一个名为'name'的数据，过期时间为1秒
getWithExpires('name'); // 检查'name'是否过期，若未过期，则返回此数据

结论

localstorage 的过期时间设置是前端开发的一个常见需求，因为 localstorage 中的数据一经存储就会一直存在，如果存储了一些敏感信息或者数据量过大容易引起浏览器卡顿。本文分别介绍了通过 sessionStorage 和 cookie 设置 localstorage 过期时间的方法，以及自封装 localstorage 实现过期时间设置的方法。

总的来说，使用 sessionStorage 或 cookie 是一种比较简单易用的方式，但是这种方式只适用于存储一些不太重要的数据或者存储量不是很大的数据；自封装 localstorage 的方式虽然比较麻烦，但是可以更加全面和有效地控制 localstorage 中数据的过期时间。因此，在具体的开发中，我们需要结合实际需求，选择最适合的方式来设置 localstorage 的过期时间。