localStorage和sessionStorage(学习时间不长，欢迎指正)

最新推荐文章于 2024-04-29 10:39:55 发布

似琼碧落

最新推荐文章于 2024-04-29 10:39:55 发布

阅读量153

点赞数 4

文章标签： html5 html javascript

本文链接：https://blog.csdn.net/qq_52900794/article/details/120730494

版权

本地存储(local和session）

html5中的Web Storage包括了两种存储方式：

localStorage和sessionStorage一样都是用来存储客户端临时信息的对象。

sessionStorage用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问
并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储，仅是会话级别的存储。只允许同一窗口访问。

而localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。同源可以读取并修改localStorage数据。

本地存储特性

1、数据存储在浏览器中。

2、设置、读取方便、甚至页面刷新不丢失数据。

3、容量比Cookie大Cookie是一段不超过4KB的小型[文本](https://baike.baidu.com/item/文本/5443630)数据，由一个名称（Name）、一个值（Value），sessionStorage约5M、localStorage约20M。

4、localStorage和sessionStorage存储数据的格式都是以字符串的形式来存储的，，可以将对象JSON.stringify() 编码后存储。

操作方式：

存：

  var obj = {"name":"xiaoming","age":"16"}
  localStorage.setItem("userInfo",JSON.stringify(obj));

取：

 var user = JSON.parse(localStorage.getItem("userInfo"))

删除：

localStorage.remove("userInfo);

localStorage具体：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- HTML代码，不做解释 -->
		<input type="text" name="" id="" value="" class="ipt" />
		<button class="setItem" type="button">储存</button>
		<button class="getItem" type="button">显示</button>
		<button class="removeItem" type="button">删除</button>
		<button class="clear" type="button">删除全部</button>
		<script>
		/*localStorage:
		生命周期为永久，不删除不消失，必须在相同地址的页面，也不可更换浏览器
		*/
		//获取节点
			var ipt = document.querySelector('.ipt')
			var set = document.querySelector('.setItem')
			var get = document.querySelector('.getItem')
			var remove = document.querySelector('.removeItem')
			var deall = document.querySelector('.clear')
			//监听注册方式绑定点击事件
			set.addEventListener('click', function() {
				//给input内容定义变量名
				var eal = ipt.value;
				//setItem储存,第一个值为key，也就是索引
				window.localStorage.setItem('text', eal)
			});
			//getItem获取,根据key得到值
			get.addEventListener('click', function() {
				alert('您储存的数据为:' + window.localStorage.getItem('text'))
			})
			//removeItem删除,删除key的值
			remove.addEventListener('click', function() {
				window.localStorage.removeItem('text')
			})
			//clear删除全部，不需要key全都删
			deall.addEventListener('click', function() {
				window.localStorage.clear()
			})
		</script>
	</body>
</html>

sessionStorage具体:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- HTML代码，不做解释 -->
		<input type="text" name="" id="" value="" class="ipt" />
		<button class="setItem" type="button">储存</button>
		<button class="getItem" type="button">显示</button>
		<button class="removeItem" type="button">删除</button>
		<button class="clear" type="button">删除全部</button>
		<script>
		/*sessionStorage:
		1、生命周期为关闭浏览器窗口
		
		2、在同一个窗口(页面)下数据可以共享
		
		3、以键值对的形式存储使用
		*/
		//获取节点
			var ipt = document.querySelector('.ipt')
			var set = document.querySelector('.setItem')
			var get = document.querySelector('.getItem')
			var remove = document.querySelector('.removeItem')
			var deall = document.querySelector('.clear')
			//监听注册方式绑定点击事件
			set.addEventListener('click', function() {
				//给input内容定义变量名
				var eal = ipt.value;
				//setItem储存,第一个值为key，也就是索引
				window.sessionStorage.setItem('text', eal)
			});
			//getItem获取,根据key得到值
			get.addEventListener('click', function() {
				alert('您储存的数据为:' + window.sessionStorage.getItem('text'))
			})
			//removeItem删除,删除key的值
			remove.addEventListener('click', function() {
				window.sessionStorage.removeItem('text')
			})
			//clear删除全部，不需要key全都删
			deall.addEventListener('click', function() {
				window.sessionStorage.clear()
			})
		</script>
	</body>
</html>

似琼碧落

关注

4
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
localStorage和sessionStorage(学习时间不长，欢迎指正)

本地存储(local和session）html5中的Web Storage包括了两种存储方式：localStorage和sessionStorage一样都是用来存储客户端临时信息的对象。sessionStorage用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储，仅是会话级别的存储。只允许同一窗口访问。而localStorage用于持久化的本地存储，除非主动删除数
复制链接

扫一扫