WebStorage

最新推荐文章于 2023-04-29 16:20:05 发布

Curry 3O

最新推荐文章于 2023-04-29 16:20:05 发布

阅读量348

点赞数 1

分类专栏： h5API

本文链接：https://blog.csdn.net/qq_42552393/article/details/100071413

版权

h5API 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

一、Webstorage介绍

HTML5中与本地存储相关的两个重要内容：WebStorage与本地数据库。其中，WebStorage存储机制是对HTML4中cookie存储机制的一个改善。由于cookie存储机制有很多缺点，HTML5不再使用它，转而使用改良后的WebStorage存储机制。本地数据库是HTML5中新增的一个功能，使用它可以在客户端本地建立一个数据库，原本必须保存在服务器端数据库中的内容现在可以直接保存在客户端本地了，这大大减轻了服务器端的负担，同时也加快了访问数据的速度。

WebStorage 分为 localStorage 和 sessionStorage

二、cookie与Webstorage的区别

1.存储大小不同
cookie 的大小不能超过4K；WebStorage 也是有大小限制的，不过比 cookie 大很多，5M或更大。

2.数据有效期不同

sessionStorage ：更在当前浏览器窗口关闭前有效
localStorage ：始终有效，即使窗口被关闭也有效。需手动清除
cookie ：在设置cookie时，设置的过期时间前都是有效的，即使关闭了浏览器

3.作用域不同

sessionStorage：不在不同的浏览器窗口中共享，即使是同一个页面
localStorage 和cookie ：在所有同源窗口都是共享的

4.webStorage支持事件通知机制，可以将数据更新的通知发送给监听者。

5.cookie数据始终在同源的http请求中携带(即使不需要)，即cookie在浏览器和服务器间来回传递。

6.安全性问题
http 请求中的 cookie 是明文传递的。

7.网络负担
cookie 会被附加在每个HTTP请求中。

三、Webstorage的方法和属性

1.sessionStorage

length
唯一的属性，只读，用来获取 storage 内的键值对数量

key(index)
根据 index 获取 storage 的键名

Value
存入 Key 中的值

getItem
读取数据，根据 key 获取 storage 内的对应 value
sessionStorage.getItem("key");
//或者写成
sessionStorage.key;
setItem
保存数据，为storage内添加键值对
sessionStorage.setItem("key","value");
//或者写成
sessionStorage.key="value";
removeItem
删除数据，根据键名，删除键值对
sessionStorage.removeItem("key");
clear
清空storage对象
sessionStorage.clear();

示例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>sessionStorage</title>
	<script>
		window.onload = function(){
			//存储数据时，只能存储类型为字符串的;如果想要存储对象，需要先将对象转成json字符串
			sessionStorage.setItem('name','tom');
			sessionStorage.setItem('age',28);
			sessionStorage.setItem('obj',JSON.stringify({name:'yoo',age:27}));

			//获取数据
			var age = sessionStorage.getItem('age');
			console.log(age); //28
			var obj = sessionStorage.getItem('obj');
			console.log(JSON.parse(obj)); //Object { name: "yoo", age: 27 }
			console.log(sessionStorage.key(2)); //age

			//遍历sessionStorage
            for(var i=0;i<sessionStorage.length;i++){
                var key = sessionStorage.key(i);
                console.log(key+' : '+sessionStorage.getItem(key));
            }
            //name : tom
            //obj : {"name":"yoo","age":27}
            //age : 28

			//在sessionStorage文件中获取localStorage文件中在localStorage中存储的数据
			console.log(localStorage.getItem('gender')); //男   
			//localStorage将数据保存在客户端本地的硬件设备,任何选项卡都能获取
		}
	</script>
</head>
<body>
</body>
</html>

2.localStorage

length
唯一的属性，只读，用来获取 storage 内的键值对数量

key(index)
根据 index 获取 storage 的键名

Value
存入 Key 中的值

getItem
读取数据，根据 key 获取 storage 内的对应 value
localStorage.getItem("key");
//或者写成
localStorage.key;
setItem
保存数据，为storage内添加键值对
localStorage.setItem("key","value");
//或者写成
localStorage.key="value";
removeItem
删除数据，根据键名，删除键值对
localStorage.removeItem("key");
clear
清空storage对象
localStorage.clear();

示例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>localStorage</title>
	<script>
		window.onload = function(){
			//存储数据
			localStorage.setItem('gender','男');
			localStorage.setItem('address','江苏');
	
			//遍历localStorage
			for(var i=0;i<localStorage.length;i++){
	        	var key = localStorage.key(i);
	            console.log(key+' : '+localStorage.getItem(key));
	        }
	        //gender : 男
	        //address : 江苏
			
			//在localStorage文件中获取sessionStorage文件中在sessionStorage中存储的数据
			console.log(sessionStorage.getItem('name')); //null 
			//sessionStorage保存的任何数据仅限当前选项卡获取
		}
	</script>
</head>
<body>
</body>
</html>

四、webStorage的优势

从容量上讲WebStorage一般浏览器提供5M的存储空间，用来存储视频、图片神马的不够，但对于绝大部分操作足矣
安全性上WebStorage并不作为HTTP header发送的浏览器，所以相对安全
从流量上讲，因为WebStorage不传送到服务器，所以不必要的流量可以节省，这样对于高频次访问或者针对手机移动设备的网页还是很不错的

这并不意味着 WebStorage 可以取代 cookie，而是有了 WebStorage 后 cookie 能只做它应该做的事情了——作为客户端与服务器交互的通道，保持客户端状态。所以仅仅作为本地存储解决方案 WebStorage 是优于 cookie 的。

Curry 3O

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
WebStorage

一、Webstorage介绍HTML5中与本地存储相关的两个重要内容：WebStorage与本地数据库。其中，WebStorage存储机制是对HTML4中cookie存储机制的一个改善。由于cookie存储机制有很多缺点，HTML5不再使用它，转而使用改良后的WebStorage存储机制。本地数据库是HTML5中新增的一个功能，使用它可以在客户端本地建立一个数据库，原本必须保存在服务器端数据库中...
复制链接

扫一扫

专栏目录