cookie\session\localStorage\sessionStorage之间的区别及应用

最新推荐文章于 2022-06-30 18:15:31 发布

前端老周头

最新推荐文章于 2022-06-30 18:15:31 发布

阅读量330

点赞数 1

分类专栏： HTML

本文链接：https://blog.csdn.net/Jouen521/article/details/80092534

版权

HTML 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

cookie保存在客户端用于存储服务器发给客户端的特殊信息。在使用中如果不设置过期时间，则cookie会保存在内从中会在浏览器关闭以后被清除。如果设置了过期时间，cookie会保存在硬盘中，直到时间过期才会被清除。（Cookie的大小会有限制，不能超过4K，Cookie只能以文本的方式保存字符串，不安全：其存储的值会随着页面的请求一同发往服务器）
Session保存在服务器端，对存储的大小没有限制。
HTML5中提供了两种存储方式：LocalStorage和SessionStorage，对存储的大小没有限制，只能用于存储字符串类型，不与服务器进行交互。
LocalStorage:是永久性的存储，除非可以去删除，否则即使浏览器关闭或是页面关闭，存储的值依然存在。
SessionStorage:其存储的值会在浏览器窗口关闭以后被销毁。

 
  LocalStorage方法： 

.getItem(key)//用于获取key中所存储的值
.setItem(key,value)//将value值存储在key中
.removeItem(key)//移除key中存储的值
这里引用《h5移动web开发指南》上的话：“当同源页面的某个页面修改了localStorage,其余的同源页面只要注册了storage事件，就会触发

练习（A页面和B页面满足同源策略，A修改LocalStorage值，B会被触发）

A页面
<body>
	请输入：<input type="text" value="" class="name" />
	<button class="btn">提交</button>
</body>
<script src="./jquery-1.10.1.min.js"></script>
<script>
	$(function() {
		$(".btn").click(function() {
			var name = $(".name").val();
			console.log(name);
			localStorage.setItem("name", name);
		})
	})
</script>

B页面
<body>
	<p class="a"></p>
	<p class="b"></p>
</body>
<script src="./jquery-1.10.1.min.js"></script>
<script>
	$(function(){
		window.addEventListener("storage",function(event){
			var name=event.key;
			var value=event.newValue;
			$(".a").html(name);
			$(".b").html(value);
			console.log(event.key+"="+event.newValue);
		})
	})
</script>

前端老周头

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
cookie\session\localStorage\sessionStorage之间的区别及应用

cookie保存在客户端用于存储服务器发给客户端的特殊信息。在使用中如果不设置过期时间，则cookie会保存在内从中会在浏览器关闭以后被清除。如果设置了过期时间，cookie会保存在硬盘中，直到时间过期才会被清除。（Cookie的大小会有限制，不能超过4K，Cookie只能以文本的方式保存字符串，不安全：其存储的值会随着页面的请求一同发往服务器）Session保存在服务器端，对存储的大小没有限制。...
复制链接

扫一扫