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

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

时间:2022-12-29 18:34:49浏览次数:53  
标签: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/wsx123/p/17013240.html

相关文章

  • window.onerror 和window.addEventListener('error')的区别
    1.定义window.onerror全局事件函数window.onerror=function(message,source,lineno,colno,error){...}/**message:错误信息(字符串)。可用于HTMLonerror="......
  • windows10 安装 IIS 部署 asp.net core项目
     安装IIShttps://blog.csdn.net/qq_39953519/article/details/114371495这里写的比较详情 PublishASP.NetCore6.0MVCtoIISinVisualStudio2022 我按照......
  • 中文字符在Linux和Windows的区别
    我写一个程序,需要用到\t进行对齐,里面有中文字符。在Windows系统能够完美运行,但是去到Linux则出现问题,并不能对齐。研究了很久,发现是因为:Linux一个中文字符占3个cahr,而Wi......
  • Termius最新版windows/mac 安装教程「亲测好用」
    今天主讲windows的termius破解、mac的termius破解,windows的termius安装教程和mac的termius安装教程。 1.下载安装包mac和windows破解版的安装包都有,先去下载。Termius......
  • Windows10:该文件没有与之关联的应用来执行该操作
    发现桌面上快捷方式都有一个小箭头的图标,这当然更不能忍,于是在注册表里面删除了IsShortcut。(这是win10和win7时代的方法)。可是重启后,我发现下方任务栏的固定图标打不开......
  • 利用WindowsAPI创建窗体(c++)
    代码://回调函数LRESULTCALLBACKWinProc(HWNDhWnd,UINTuMsg,WPARAMwParam,LPARAMlParam){switch(uMsg){caseWM_CREATE:break;caseWM_DESTROY:{P......
  • Windows下根据进程id获得进程名
    //根据进程id获得进程名wstringGetModuleName(DWORDdwPid){HANDLEhSnapshot=CreateToolhelp32Snapshot(TH32CS_SNAPPROCESS,dwPid);if(INVALID_HANDLE_VALUE==h......
  • Windows进程通信之共享内存通信(C++)
    首先是概念:​​https://baike.baidu.com/item/%E5%85%B1%E4%BA%AB%E5%86%85%E5%AD%98/2182364?fr=aladdin​​这是比较官方的解释在我的理解,共享内存通信指的是,一个进程开......
  • windows 根据父进程pid查找所有子进程id(C++)
    直接上代码:大家直接调用即可#include<iostream>#include<Windows.h>#include<tlhelp32.h>#include<string>#include<vector>usingnamespacestd;vector<DWORD>GetPro......
  • Hook Windows API调用 C++
    //dllmain.cpp:定义DLL应用程序的入口点。#include"pch.h"//olddatatypedefBOOL(WINAPI*pProcessInternalW)(HANDLEhToken,LPCWSTRAppName,LPWSTRCmdLine,......