HTML本地存储设置过期策略

2021-04-13  本文已影响0人  踏莎行

  本地存储我们有时候有也可以用来存储从服务器请求过来的数据,当用户在短时间刷新请求相同的数据时,我们就可以将数据存储在本地,多次请求时就可以直接从本地取,减少ajax的请求,但是数据是无时无刻在变化的,这时就需要为本地数据设置过期策略
  实现原理就是在向本地存储数据的同时将当前的事件也一并存入,在获取数据的同时获得当前时间。现在的时间减去原来存入时的时间,如果时间超出设定的时间,说明数据过期,重新请求数据

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        // 获取存入数据时的时间
        var storageTime = new Date().getTime()
        console.log(storageTime);
        // 创建数据
        var data = {
            name: "张三",
            age: 30,
            // 别忘了存入时间
            storageTime: storageTime
        }
        window.localStorage.setItem("dataKey", JSON.stringify(data))


        setTimeout(() => {
            // 获取数据并将json字符串转换成对象
            var objData = JSON.parse(window.localStorage.getItem("dataKey"))
            if ((new Date().getTime() - objData.storageTime) >= 4000) {
                console.log("数据过期了");
            } else {
                console.log("没过期");
            }
        }, 4000)
    </script>
</body>

</html>

new Date().getTime()返回的是毫秒数,1s = 1000ms
我们可以使用定时器来模拟获取数据

上一篇下一篇

猜你喜欢

热点阅读