本地存储我们有时候有也可以用来存储从服务器请求过来的数据，当用户在短时间刷新请求相同的数据时，我们就可以将数据存储在本地，多次请求时就可以直接从本地取，减少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
我们可以使用定时器来模拟获取数据
网友评论