重写localStorage 添加过期时间

 /**
  * 重写localStorage
  */
    function rewriteLocalStorage () {
      if (!window.__rewrite__localStorage) {
        Object.assign(window, {
          __rewrite__localStorage: true,
          __localStorage__setItem: localStorage.setItem,
          __localStorage__getItem: localStorage.getItem,
          __localStorage__removeItem: localStorage.removeItem
        })

        if (!localStorage.__expires) {
          localStorage.__expires = '{}'
        }

        localStorage.setItem = function (key, value, millisecond) {
          if (millisecond) {
            let __expires = JSON.parse(localStorage.__expires)
            __expires[key] = +Date.now() + millisecond
            localStorage.__expires = JSON.stringify(__expires)
          }
          window.__localStorage__setItem.call(this, key, value)
        }

        localStorage.getItem = function (key) {
          window.clearExpires()
          return window.__localStorage__getItem.call(this, key)
        }

        localStorage.removeItem = function (key) {
          let __expires = JSON.parse(localStorage.__expires)
          delete __expires[key]
          localStorage.__expires = JSON.stringify(__expires)
          return window.__localStorage__removeItem.call(this, key)
        }

        window.clearExpires = function () {
          let __expires = JSON.parse(localStorage.__expires)
          for (let key in __expires) {
            if (__expires[key] < Date.now()) {
              localStorage.removeItem(key)
            }
          }
        }
      }
    }

// 调用

// key value 过期时间
localStorage.setItem('onlinePeopleNum', num, 3000)

//设计的数据格式
设计的数据格式

存的时候单独的存了一个key为__expires用来保存时间

// key 就是 要存的字段名称  value是过期时间
let __expires = {
    onlinePeopleNum2: 1603507537005
}
// 使用 localStorage.getItem('onlinePeopleNum') 获取时候,会先找到__expires 然后去遍历里面的值是否过期
window.clearExpires = function () {
    let __expires = JSON.parse(localStorage.__expires)
    for (let key in __expires) {
        if (__expires[key] < Date.now()) {
            localStorage.removeItem(key)
        }
    }
}
localStorage 是 HTML5 提供的一种在客户端存储数据的方法,它可以将数据存储在浏览器中。localStorage 没有提供直接设置过期时间的 API,但是我们可以手动实现过期时间的功能。以下是一个简单的方法: 1. 存储数据时,除了存储数据本身,还存储一个过期时间(以时间戳的形式存储)。 2. 获取数据时,判断当前时间是否大于过期时间,如果是,则删除数据并返回 null,否则返回存储的数据。 3. 可以在每次页面加载时,检查 localStorage 中的所有数据是否过期,如果过期,则删除这些数据。 以下是一个示例代码: ```javascript function setLocalStorageWithExpiration(key, value, expirationInMinutes) { const expirationDate = new Date(new Date().getTime() + (expirationInMinutes * 60 * 1000)); const item = { value: value, expirationDate: expirationDate.getTime() }; localStorage.setItem(key, JSON.stringify(item)); } function getLocalStorageWithExpiration(key) { const itemStr = localStorage.getItem(key); if (!itemStr) { return null; } const item = JSON.parse(itemStr); const now = new Date(); if (now.getTime() > item.expirationDate) { localStorage.removeItem(key); return null; } return item.value; } // 每次页面加载时,检查 localStorage 中的所有数据是否过期 for (let i = 0; i < localStorage.length; i++) { const key = localStorage.key(i); getLocalStorageWithExpiration(key); } ``` 在上面的代码中,我们定义了两个函数:setLocalStorageWithExpiration 和 getLocalStorageWithExpiration。setLocalStorageWithExpiration 函数用于将数据存储到 localStorage 中,并设置过期时间;getLocalStorageWithExpiration 函数用于从 localStorage 中获取数据,并检查数据是否过期。最后,我们在页面加载时,遍历 localStorage 中的所有数据,并检查它们是否过期。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值