526互联

存储机制（Window.sessionStorage 和 Window.locaStorage）

发布时间 2023-11-29 14:39:40作者: 吕金林

<!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>