一、概念介绍
cookie
是在HTML4中使用的给客户端保存数据的,也可以和session配合实现跟踪浏览器用户身份;而webstorage(包括:localStorage
和sessionStorage
)是在HTML5提出来的,纯粹为了保存数据,不会与服务器端通信。
WebStorage两个主要目标:
- 提供一种在
cookie
之外存储会话数据的路径 - 提供一种存储大量可以跨会话存在的数据的机制
二、cookie 的特点
- 只能使用文本文件
- 文件有大小限制4K左右
- 不可跨域
- 时效限制(默认会话级,可指定)
- 每次都会随着请求,发往服务器
- 完全兼容
三、localStorage 的特点
- 只能使用文本文件
- 文件有大小5M左右
- 不可跨域
localStorage
没有过期时间;sessionStorage
只能会话级- 不会发往服务器
- 低版本浏览器不兼容
不安全、不能跨域、不能跨浏览器,写入的都是字符
四、相同点
cookie
,localStorage
,sessionStorage
都是在客户端保存数据的,存储数据的类型都是字符串,都不安全、不能跨域、不能跨浏览器。
五、不同点:
1. 有效期:
cookie
如果不设置有效期,那么就是临时存储(存储在内存中),是会话级别的,会话结束后,cookie
也就失效了,如果设置了有效期,那么cookie
存储在硬盘里,有效期到了,就自动消失。localStorage
的生命周期是永久的,关闭页面或浏览器之后localStorage
中的数据也不会消失。localStorage
除非主动删除数据,否则数据永远不会消失。sessionStorage
仅在当前会话下有效。sessionStorage
引入了一个“浏览器窗口”的概念,sessionStorage
是在同源的窗口中始终存在的数据。只要这个浏览器窗口没有关闭,即使刷新页面或者进入同源另一个页面,数据依然存在。但是sessionStorage
在关闭了浏览器窗口后就会被销毁。同时独立的打开同一个窗口同一个页面,sessionStorage也是不一样的。- 可以简单的理解为:
sessionStorage
就是没有设置有效期的cookie
。 - 如果说把
cookie
的有效期设置为永久(当然没有永久的事件),那么就是localStorage
。
2. 网络流量
cookie
的数据每次都会发给服务器端,而localstorage
和sessionStorage
不会与服务器端通信,纯粹为了保存数据,所以,storage更加节约网络流量。
3. 大小限制
cookie
大小限制在4KB,非常小;localstorage
和sessionStorage
在5M
4. 安全性
WebStorage不会随着HTTP header发送到服务器端,所以安全性相对于cookie来说比较高一些,不会担心截获。
5. 便携性
cookie只提供了一个属性可供操作;而storage提供了一系列的API,操作方便快捷
六、语法
1. cookie
// 设置
let d = new Date();
d.setDate(d.getDate()+3);
document.cookie = `${key}=${value};expires=${d};path=/;domain=localhost`;
// 获取,只能获取所有,需要配合字符串处理,才能拿到指定cookie
console.log(document.cookie)
// 删除,将有效期expires设置为过去的日期对象
let d = new Date();
d.setDate(d.getDate()-1);
document.cookie = `${key}=${value};expires=${d};path=/;domain=localhost`;
2. storage
localstorage
和sessionStorage
的操作API一致,此处以localstorage
举例
localstorage.setItem(key, value); // 保存数据,以键值对的方式储存信息。
localstorage.getItem(key); // 获取数据,将键值传入,即可获取到对应的value值。
localstorage.removeItem(key); // 删除单个数据,根据键值移除对应的信息。
localstorage.clear(); // 删除所有的数据,不推荐使用
localstorage.key; // 获取指定key的value
以上,如有纰漏或不同观点,欢迎留言讨论…