有时效的 localStorage

__畫戟__

已于 2023-03-05 15:34:24 修改

阅读量121

点赞数

分类专栏： JavaScript 前端公用 .js 文章标签：有时效localStorage localStorage localStorage过期 webStorage maxAgeStorage

于 2022-05-18 22:46:12 首次发布

本文链接：https://blog.csdn.net/qq_41887214/article/details/124853022

版权

JavaScript 同时被 2 个专栏收录

63 篇文章 4 订阅

订阅专栏

前端公用 .js

34 篇文章 0 订阅

订阅专栏

思路

封装一个 maxAgeStorage 来对 localStorage 进行操作

setItem时，外层数据多放进一个 expires 来设置过期时间
getItem时，如果现在时间小于 expires 则清除该key

代码

const maxAgeStorage = {
    /**
     * 存储数据
     * @param key         键名
     * @param value       键值
     * @param duration    存储时长s
     */
    setItem(key, value, duration = 0) {
      const data = {
        value,
      }
      // 如果设置了存储时长，则添加 duration 字段
      // 如果没设置则不做时效设置
      if (duration) {
        data.expires = new Date().getTime() + (Number(duration) * 1000)
      }
      localStorage.setItem(key, JSON.stringify(data))
    },

    /**
     * 获取数据
     * @param key         键名
     * @returns {null}    在 localstorage 中 key 对应的值
     */
    getItem(key) {
      let obj = localStorage.getItem(key)
      let result
      if (obj) {
        const data = JSON.parse(obj)

        if (!data.hasOwnProperty('expires')) {
          // 如果数据中不包含 expires 字段，则表明数据无时效设置
          result = data.value
        } else if (new Date().getTime() > data.expires) {
          // 数据有时效设置，且已过期
          result = null
          localStorage.removeItem(key)
        } else {
          // 未过期
          result = data.value
        }
      }
      return result
    },

    /**
     * 移除在 localstorage 中对应的key
     * @param key
     */
    removeItem(key) {
      localStorage.removeItem(key)
    },

    /**
     * 移除所有 localstorage 值
     */
    clear() {
      localStorage.clear()
    }
  }
  
  export default maxAgeStorage

测试

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
<h1>有时效的LocalStorage</h1>
<label for="data">数据：</label><input type="text" id="data" />
<label for="data">存储时长(s)：</label><input type="text" id="duration" />
<br />
<br />
<button id="save">存储数据</button>
<button id="getData">获取数据</button>
<script>
  const maxAgeStorage = {
    /**
     * 存储数据
     * @param key         键名
     * @param value       键值
     * @param duration    存储时长s
     */
    setItem(key, value, duration = 0) {
      const data = {
        value,
      }
      // 如果设置了存储时长，则添加 duration 字段
      // 如果没设置则不做时效设置
      if (duration) {
        data.expires = new Date().getTime() + (Number(duration) * 1000)
      }
      localStorage.setItem(key, JSON.stringify(data))
    },

    /**
     * 获取数据
     * @param key         键名
     * @returns {null}    在 localstorage 中 key 对应的值
     */
    getItem(key) {
      let obj = localStorage.getItem(key)
      let result
      if (obj) {
        const data = JSON.parse(obj)

        if (!data.hasOwnProperty('expires')) {
          // 如果数据中不包含 expires 字段，则表明数据无时效设置
          result = data.value
        } else if (new Date().getTime() > data.expires) {
          // 数据有时效设置，且已过期
          result = null
          localStorage.removeItem(key)
        } else {
          // 未过期
          result = data.value
        }
      }
      return result
    },

    /**
     * 移除在 localstorage 中对应的key
     * @param key
     */
    removeItem(key) {
      localStorage.removeItem(key)
    },

    /**
     * 移除所有 localstorage 值
     */
    clear() {
      localStorage.clear()
    }
  }

  const dataInput = document.getElementById('data')
  const durationInput = document.getElementById('duration')
  const save = document.getElementById('save')
  const getData = document.getElementById('getData')
  let count = 0
  save.addEventListener("click", function (e) {
    const data = {
      data: dataInput.value,
      id: ++count
    }
    maxAgeStorage.setItem('test', data, durationInput.value)
  })
  getData.addEventListener("click", function (e) {
    const data = maxAgeStorage.getItem('test')
    console.log('getItem', data);
  })
</script>
</body>
</html>

__畫戟__

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
有时效的 localStorage

封装一个 maxAgeStorage 来对 localStorage 进行操作setItem时，外层数据多放进一个 expires 来设置过期时间getItem时，如果现在时间小于 expires 则清除该key
复制链接

扫一扫