Web存储

最新推荐文章于 2021-05-23 23:29:46 发布

末木CT

最新推荐文章于 2021-05-23 23:29:46 发布

阅读量307

点赞数 1

分类专栏： Web前端

本文链接：https://blog.csdn.net/rachel_ct/article/details/78376599

版权

Web前端专栏收录该内容

12 篇文章 0 订阅

订阅专栏

Web存储是HTML5的新特征，是一种将少量数据存储在客户端磁盘的技术。

相比cookie：1.浏览器能存的cookie数量较少，如IE8，Firefox每个域名只能保存50个cookie（safari/WebKit没有限制），一个cookie文件最多可以存放4096B左右的数据。

2.每次对服务器请求时，cookie会存放在请求头中一同传到服务器，若请求头大小超过限制服务器无法处理，因此cookie不适合大量数据的传输，速度也较慢。

两种web存储：localStorage和sessionStorage。localStorage方法存储的数据没有时间限制，数据不会随浏览器的关闭而被清除，除非手动清楚。sessionStorage方法存储的数据当用户关闭浏览器时数据就会被清除。

下面给出简单示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<script src="js/jquery-3.2.1.min.js"></script>
		<title>Web存储</title>
	</head>
	<body>
		<input type="text" id="put" value="此处输入文本"/>
		<input type="button" id="save" value="点击保存"/>
		<input type="button" id="show" value="点击查看上次输入的文本" />
		<input type="button" id="clear" value="点击清除保存" />
		<script type="text/javascript">
			//sessionStorage
//			var getinfo=window.sessionStorage.getItem("put");
//			$("#save").click(function(){
//				window.sessionStorage.setItem("put",$("#put").val());
//			})
//			$("#show").click(function(){
//				alert("你输入的内容是："+getinfo);
//			})
//			$("#clear").click(function(){
//				window.sessionStorage.removeItem("put")
//			})
			
			 //localStorage
			var getinfo=window.localStorage.getItem("put");
			$("#save").click(function(){
				window.localStorage.setItem("put",$("#put").val());
			})
			$("#show").click(function(){
				alert("你输入的内容是："+getinfo);
			})
			$("#clear").click(function(){
				window.localStorage.removeItem("put")
			})
			 
		</script>
	</body>
</html>

当我们采用localStorage方法存储数据时，输入文本并保存并刷新，这时点击查看会看到输入的文本内容，再点清除保存并刷新，这时候查看上次输入内容则是，再次输入内容并保存，将浏览器关闭后打开页面查看内容依然可以看到我们上次输入的内容。同样的道理，sessionStorage与locaStorage不同的地方在于我们关闭浏览器后再查看上次输入的内容是为null的。

初学浅知，有理解不当的地方还望大家指出。

末木CT

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Web存储

Web存储是HTML5的新特征，是一种将少量数据存储在客户端磁盘的技术。相比cookie：1.浏览器能存的cookie数量较少，如IE8，Firefox每个域名只能保存50个cookie（safari/WebKit没有限制），一个cookie文件最多可以存放4096B左右的数据。2.每次对服务器请求时，cookie会存放在请求头中一同传到服务器，若请求头大小超过限制服务器无法处理，因此co
复制链接

扫一扫