重写学习 localStorage 与 sessionStorage

news/2025/3/18 15:24:02/文章来源:https://www.cnblogs.com/IwishIcould/p/18227111
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 和 valuelocalStorage.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 = 0if(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()){// 移除 Storagethis.removeItem(key)return null}return getData.value}// 移除 StorageremoveItem(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')

尾声

如果阅读后,有所收获;
可以给我点个推荐吗? 也可以打赏我
感谢了!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/720159.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

ASP.NET Web应用程序升级最新的MSBuild格式后,Visual Studio 2022中如何调试?

摘要 把ASP.NET的Web应用程序,Project文件从 <Project ToolsVersion="12.0" DefaultTargets="Build" xmlns="http://schemas.microsoft.com/developer/msbuild/2003">改为 <Project Sdk="Microsoft.NET.Sdk.Web">之后,升…

AI带你玩转音乐,使你成为真正音乐人(AI歌曲制作)

利用AI工具快速完成一首歌: 歌由词和曲组成。 词可以利用文心一言 输入:写一首赞扬国家繁华发展的歌词 这样一首歌的词部分已经出来。 曲部分: 利用https://suno.com/create生成: 拷贝文心一言生成的词 选择定制模式Custom Mode有更多的风格可以制作点击生成就可以完成曲制…

零基础写框架(2):故障排查和日志基础

关于从零设计 .NET 开发框架 作者:痴者工良 教程说明: 仓库地址:https://github.com/whuanle/maomi 文档地址:https://maomi.whuanle.cn 作者博客: https://www.whuanle.cn https://www.cnblogs.com/whuanle 故障排查和日志 .NET 程序进行故障排查的方式有很多,笔者个人总…

使用Visual Studio分析.NET Dump

前言 内存泄漏和高CPU使用率是在日常开发中经常遇到的问题,它们可能会导致应用程序性能下降甚至崩溃。今天我们来讲讲如何使用Visual Studio 2022分析.NET Dump,快速找到程序内存泄漏问题。 什么是Dump文件? Dump文件又叫内存转储文件或者叫内存快照文件。用于存储程序运行时…

springboot模块化开发项目搭建

1.New一个Project,命名,Next,Finish 2.根据需要修改Maven配置 3.初始化后,删除无用文件4.选中项目创建Module,命名,Next,一般模块包括common、dao、service、web、entrance(入口文件),也可以增加订单、会员等各种业务模块,各模块之间依赖引用即可5.删除无用文件,删…

组合数学中的食用工具

背景: 教授在打概率和期望中的《灯蹬登》,需要推式子。众所周知,一个正确的式子不光要可以解释已有的数据,还要能预测未知数据的结果。在这样的情况下,组合数学的工具是必不可少的。我们通过这个工具实现了三种计算器无法直接实现的功能:输入\(A,m,n\),表示求\(A^m_n\)的…

读AI未来进行式笔记03自然语言处理技术

自然语言处理1. AI伙伴 1.1. 作为AI能力的集大成者,AI伙伴融合了各种复杂的AI技术 1.2. 人类唯一可能超越AI的领域,只可能在机器无法触及之处,那是属于人类感性与直觉的领域 1.3. 要读懂人类,需要漫长而平缓的学习过程 1.4. AI塑造了我们,我们反过来也塑造了AI 1.5. AI的“…

PyQT5之单行文本输入到多行显示窗

from PyQt5 import QtWidgets from PyQt5 import QtCore, QtGui import sys import cv2class TextDemoPanel(QtWidgets.QWidget):def __init__(self, *args, **kwargs):super().__init__(*args, **kwargs)select_btn = QtWidgets.QPushButton("输入")self.line_text …

ipsec-vpen核心demo

撸起袖子加油干!!!

什么是Transform转换

在WPF框架中有一个抽象类叫Transform,它定义了实现二维平面中的转换的功能。它包括旋转 (RotateTransform)、缩放 (ScaleTransform)、倾斜 (SkewTransform) 和平移 (TranslateTransform)4个子类。它定义如何将点从一个坐标空间映射或转换到另一个坐标空间。 此映射由转换 Matr…

Kubernetes – NodePort 服务

Kubernetes 中的 NodePort 服务是一种用于将应用程序公开到互联网的服务,最终用户可以从互联网访问它。如果您创建 NodePort 服务,Kubernetes 将分配 (30000-32767) 范围内的端口。最终用户可以使用节点的 IP 地址访问该应用程序。 Kubernetes 服务的类型 在Kubernetes 中,有…