localStorage 与 sessionStorage
localStorage 与 sessionStorage 很多小伙伴对它们俩都很熟悉了；
最熟悉的莫过下面这2条
1,localStorage 存储的数据没有时间限制,理论上永久有效;除非手动清除。
sessionStorage 存储的数据在关闭当前页面后失效;
2,有存储大小限制，两者存储大约5MB,但实际大小可能会因浏览器而异。
但是下面的这2条小伙伴不一定知道。
2,localStorage可以被storage监听到，但是sessionStorage不能监听到。
3,在地址复制url到另外一个窗口,localStorage的数据会被复制一份,
但是sessionStorage中的数据不会被复制；
下面我们一起来看下
localStorage 可以监听到数据变化
就是浏览器打开了一个页面A，点击A页面会在浏览中打开一个新创建的页面B;
点击B页面的推荐功能，A页面的推荐数据也会实时跟新。
简单的思路
我们的相关是vue技术栈；
我们需要在A页面监听 localStorage 的变化
监听
window.addEventListener('storage',(storageData)=>{
console.log(storageData)
})
storageData这个参数中有newValue,和oldValue;以及key
newValue:新值；oldValue:旧值
key是我们存储的key，通过key可以判断是否是我们监听的那个对象
我们获取到新值后只需要重新赋值即可；
在B页面中，如果用户点击了推荐；
我们就需要把新值存储到localStorage中
监听 localStorage数据的变化
A页面代码
<template>
<div>
<div >
<div @click="goToPages" class="item-box">
<h4>{{infoObj.time }}</h4>
<span>喜欢{{infoObj.like }}</span>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
infoObj: {time:'【2024】前端，该卷什么呢？', id:'7329126541320536074', like:244},
}
},
created(){
},
methods:{
goToPages(){
// 监听 storage 事件
window.addEventListener('storage',(storageData)=>{
if(storageData.key == this.infoObj.id){
// 获取到变化后的新值
let obj = JSON.parse(storageData.newValue)
// 重新赋值
this.infoObj.like = obj.like
}
console.log(storageData)
})
// 通过 setItem 存储在 localStorage 中，接受2个参数 key 和 value
localStorage.setItem(this.infoObj.id,JSON.stringify(this.infoObj))
const {href} = this.$router.resolve({
path: "/details",
query:{
id:this.infoObj.id
}
});
// 新窗口打开页面
window.open(href, '_blank');
}
},
}
</script>
<style scoped lang="scss">
.item-box{
display: flex;
padding-left: 20px;
box-sizing: border-box;
height: 100px;
line-height: 100px;
background-color: azure;
margin-bottom:10px;
span{
display: inline-block;
margin-left: 10px;
}
}
</style>
B页面代码
<template>
<div>
<div >
<div class="item-box">
<h4>{{details.time }}</h4>
<!-- 只能触发一次 once-->
<span @click.once="addLikeHandler">喜欢{{details.like }}</span>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
details:{}
}
},
mounted() {
this.getDetails()
},
methods:{
getDetails(){
// 获取数据
const details = JSON.parse( localStorage.getItem(this.$route.query.id))
this.details = details
},
addLikeHandler(){
this.details.like = this.details.like + 1
// 用户点击喜欢后，重新存储在 localStorage 中，这样A页面就可以监听了
localStorage.setItem(this.$route.query.id,JSON.stringify(this.details))
},
}
}
</script>
监听storage无法知晓sessionStorage数据的变化
上面的代码我们只需要将localStorage改成sessionStorage即可,
我们看下页面效果;发现监听storage无法知晓sessionStorage数据是否发生变化;
无论打开是否有_blank这属性；都是无法监听sessionStorage数据变化的。
再次提醒：监听storage无法知晓sessionStorage数据的变化
在地址复制url到另外一个窗口,localStorage和sessionStorage表现如何？
在地址复制url到另外一个窗口,
localStorage的数据会被复制一份。
但是sessionStorage中的数据不会被复制；
sessionStorage -数据不会被复制
localStorage-数据会被复制
window.open()的方式打开窗口,localStorage 和 sessionStorage表现如何？
localStorage的数据会被复制一份。
但是sessionStorage中的数据也会被复制；
无论是否是 window.open(href)还是window.open(href, '_blank')
localStorage设置过期时间
为啥要写这个，因为很多面试官都喜欢问。
设置过期的时间的基本思路是：在存储的时候，设置一个有效期的时间戳；
通过new Date().getTime() + 我们的有效时间
在读取的时候，
如果当前时间戳大于存储时设置的时间戳，说明已经过期；
需要移除当前这条Storage数据，返回 null；
如果当前时间戳小于存储时设置的时间戳；没有过期，正常返回;
class Storage {
/**
* key表示设置的key值，value存储的时候，time有效期单位分钟
*/
setItem(key, value, minuteTime){
let expires = 0
if(minuteTime){
// 计算存储时的有效时间需要转化为毫秒
expires = new Date().getTime() + minuteTime * 1000 * 60
}
let storageData = JSON.stringify({value, expires})
localStorage.setItem(key, storageData) // 存储数据
}
getItem(key){
const item = localStorage.getItem(key)
const getData = JSON.parse(item)
if(!getData){
return null
}
// 说明已经过期了
if(getData.expires < new Date().getTime()){
// 移除 Storage
this.removeItem(key)
return null
}
return getData.value
}
// 移除 Storage
removeItem(key){
localStorage.removeItem(key)
}
}
export const storage = new Storage()
使用的时候
import {storage} from './storage.js'
// 设置storage有效时间
storage.setItem('info',this.infoObj, 1)
// 读取storage数据
const details = storage.getItem('info')
尾声
如果阅读后，有所收获；
可以给我点个推荐吗？ 也可以打赏我
感谢了！