首页 > 其他分享 >存储机制(Window.sessionStorage 和 Window.locaStorage)

存储机制(Window.sessionStorage 和 Window.locaStorage)

时间:2023-11-29 14:45:34浏览次数:31  
标签:locaStorage 存储 key sessionStorage Window getItem removeItem

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>web Storage</title>
<!--
1.存储内容大小一般支持5MB左右(不同浏览器可能不一样)
2.浏览器通过Window.sessionStorage 和 Window.locaStorage 属性来实现本地存储机制
3.相关API:
1.XXXXXStorage.setItem('key','value');key=键 value=值。会把键值添加到存储中,如果健名存在,则更新对应值
2.xxxxxStorage.getItem('porson') porson=键,返回value=值。
3.xxxxxStorage.removeItem('key')key=键。删除对应键值
4.xxxxxStorage.clear() 清空所有存储数据
4.备注:
SessionStorage存储内容会随着浏览器窗口关闭而消失
LocalStorage存储的内容,需要手动清除才会消失
xxxxxStorage.getItem(xxx)如果对应value获取不到,那么getItem的返回值是null
JSON.parse(null)的结果依然是null
-->
</head>
<body>


</body>
</html>

 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>sessionStorage</title>
	</head>
	<body>
		<h2>sessionStorage</h2>
		<button onclick="saveData()">点击保存一个数据</button>
		<button onclick="readData()">点击读取一个数据</button>
 		<button onclick="deleteData()">点击删除一个数据</button>
		<button onclick="deleteAllData()">点击清空一个数据</button> 
		<script>
			function saveData(){
				 
				let p = {name:'张三',age:18}
				sessionStorage.setItem('msg','hello');
				sessionStorage.setItem('msg2',666);
				//转换为字符串
				sessionStorage.setItem('msg3',JSON.stringify(p))
			}
			function readData(){
				console.log(sessionStorage.getItem('msg'));
				console.log(sessionStorage.getItem('msg2'));
				const result = sessionStorage.getItem('msg3');
				console.log(JSON.parse(result))
			}
			function deleteData(){
				sessionStorage.removeItem('msg')
				sessionStorage.removeItem('msg2')
				sessionStorage.removeItem('msg3')
			}
			function deleteAllData(){
				sessionStorage.clear()
			}
		</script>
	</body>
</html>

标签:locaStorage,存储,key,sessionStorage,Window,getItem,removeItem
From: https://www.cnblogs.com/lvjinlin/p/17864791.html

相关文章

  • 入门Windows驱动程序
    来自:https://www.anquanke.com/post/id/85972入门Windows驱动程序:0x1 背景笔者在学习中发现,关于Windows驱动编程的文章多不胜数,但是其中很多文章的内容繁杂不便于了解与学习,缺少对内容精准的概括与总结,所以本篇文章将对Windows驱动编程进行一次总结性介绍。文章将分为两个部......
  • Windows电脑上的多开工具与云桌面有何异同
    在Windows电脑上,多开工具和云桌面是两种常见的应用方式,它们各自具有一些特点和优势。本文将就多开工具和云桌面在实际使用中的异同进行比较。多开工具多开工具是指能够帮助用户同时打开多个相同软件或游戏的应用程序。在Windows操作系统中,有许多第三方多开工具可以实现这一功能,......
  • windows
     在64位系统system32是64位程序,Syswow64是32位程序。     参考:https://blog.51cto.com/u_15287666/5805954 ......
  • Windows下使用wget获取内容
    在根据Pytorch从0开始实现YOLOV3指南part2——搭建网络结构层-cwpeng-博客园(cnblogs.com) 尝试实现yolo的目标检测项目时,文中配置文件部分提到若在linux下可以用mkdircfgcdcfgwgethttps://raw.githubusercontent.com/pjreddie/darknet/master/cfg/yolov3.cfg在w......
  • nvm环境安装(windows篇)
    一、NVM版本管理环境安装配置1.nvmforwindows安装包下载地址:地址:https://github.com/coreybutler/nvm-windows/releases点击nvm-setup.exe进行下载 2.安装nvm 选择NVM安装路径,路径名称不要有空格,然后点击nextnode.js安装路径,然后点击next 根据个人习惯下载set......
  • # 在Windows中使用VMware安装Linux
    ##简介在计算机专业的学习过程中,熟练掌握不同操作系统是至关重要的一部分。本篇博客将介绍如何在Windows操作系统上使用虚拟机软件VMware来安装Linux系统。##准备工作在开始之前,确保你已经完成以下准备工作:-**VMware安装:**从官方网站[https://www.vmware.com/](https://ww......
  • Windows 11 version 22H2 中文版、英文版 (x64、ARM64) 下载 (released Nov 2023)
    Windows11version22H2中文版、英文版(x64、ARM64)下载(releasedNov2023)Windows11,version23H2,2023年10月31日发布(本月暂未更)请访问原文链接:https://sysin.org/blog/windows-11/,查看最新版。原创作品,转载请保留出处。作者主页:sysin.orgWindows11目前版......
  • Windows PBR Reset在62%处不动
    晚上在调查一个问题,需要做WindowsPBRReset,Windows的版本号是22621.2751在启动PBRReset时,一直停留在62%的进度条上(图片忘记保存了)我想通过重启系统来解决,可是重启过程也被卡住了。于是,我尝试着做WindowsUpdate,将系统更新到最新的状态,果然,完成WindowsUpdate之后,PBRReset就......
  • 在 Windows 系统上运行 VIC 水文模型
    目录配置WSL2和Ubuntu系统启用WSL2安装Linux发行版配置Ubuntu安装VIC并测试Stehekin数据集VIC模型安装samples测试VIC模型(VariableInfiltrationCapacityModel)是一个被广泛使用的大尺度分布式水文模型,该模型可同时对水循环过程中的能量平衡和水量平衡进行模......
  • 多开软件如何提高Windows电脑上的生产力
    多开软件:提升Windows电脑生产力的利器导语:在现代社会,计算机已经成为我们工作和生活中不可或缺的工具。而作为Windows电脑用户,我们可以借助多开软件的力量,进一步提高我们的生产力。本文将介绍多开软件的概念以及它们如何帮助我们更高效地利用Windows电脑。什么是多开软件?多开软......