h5 新增本地存储localStorage、sessionStorage

localStorage用户不主动删除永久存在,域名区分sessionStorage浏览器关闭时删除操作:写入:localStorage/sessionStorage.setItem('key','value');读取:localStorage/sessionStorage.getItem('key');删除:localStorage/sess......

神奇大叔

1255人浏览 · 2020-01-13 22:44:03

神奇大叔 · 2020-01-13 22:44:03 发布

文章目录

localStorage
localStorage 优化
sessionStorage
安全问题以及防范手段
操作
区别
sessionStorage应用场景：

localStorage

localStorage 存储在浏览器中，是基于域名的，而不是基于页面的
用户不主动删除永久存在,域名区分
存储在硬盘中

localStorage 优化

将数据进行放到内存中缓存处理，在用户的整个操作周期内只从 localStorage 获取一次数据，需要注意的是每次对数据进行操作时，需要将 localStorage 和内存缓存的数据同步更新
异步读写，不阻塞主线程

sessionStorage

浏览器关闭时删除

安全问题以及防范手段

详情

操作

写入:
	localStorage/sessionStorage.setItem('key','value');

读取:
	localStorage/sessionStorage.getItem('key');

删除:
	localStorage/sessionStorage.removeItem('key');
	
	clear () —— 删除所有的数据
	key (index) —— 获取某个索引的key

区别

在这里插入图片描述

如果一个标签页包含多个iframe标签且他们属于同源页面，那么他们之间是可以共享sessionStorage的
sessionStorage的作用域也在窗口间隔离。如果用户在两个浏览器标签页中打开了同一来源的文档，这两个标签页的 sessionStorage 数据也是隔离的。一个标签页中运行的脚本不能读取或重写另一个标签页中的脚本写入的数据。即便两个标签页打开的是完全相同的页面，而且运行的脚本完全相同。

sessionStorage应用场景：

可以用它对表单信息进行维护，将表单信息存储在里面，可以保证页面即使刷新也不会让之前的表单信息丢失。
可以用它存储本次浏览记录。如果关闭页面后不需要这些记录，用sessionStorage就再合适不过了。事实上微博就采取了这样的存储方式。

代码示例:

<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<style>

	
	</style>
</head>
<body>
 	
 	<button class='local'>点我local存储</button>
 	<button class='session'>点我session存储</button>
 	<button class='co'>点我cookie</button>

	<script>

	;(function(){
		document.querySelector('.local').onclick=function(){
			//添加
			localStorage.setItem('uname','jeff');
			//读取
			console.log(localStorage.getItem('uname'));
			//删除
			localStorage.removeItem('uname');
		};

		document.querySelector('.session').onclick=function(){

			sessionStorage.setItem('uname2','mike');
			console.log(sessionStorage.getItem('uname2'));
			//关闭浏览器时删除
		}


	})()

	</script>
	
</body>

</html>