sessionStorage、localStorage、cookie的区别

1. localStorage

​ localStorage 生命周期是永久，除非手动清除localStorage 否则这些信息将永远存在。

​ 存放数据大小为一般为5MB,而且它仅在客户端（即浏览器）中保存，不参与和服务器的通信

var obj = {
	user: "李狗蛋",
	sex: "男",
	age: 18
}
//存储
obj = JSON.stringify(obj)
localStorage.setItem('obj', obj)
//查看
localStorage.getItem('obj')
//删除单条
localStorage.removeItem('obj')
// 清除所有的localStorage存储数据
localStorage.clear()

2. sessionStorage

​ 仅在当前会话下有效，关闭页面或浏览器后被清除，存放数据大小为一般为 5MB。

​ 仅在客户端（即浏览器）中保存，不参与和服务器的通信

​ sessionStorage 和 localStorage的方法完全相同

​ sessionStorage.setItem(‘str’, str)

​ sessionStorage存储的数据在当前对话结束时自动清除

3. sessionStorage与localStorage的区别

​ 不同浏览器无法共享 localStorage 或 sessionStorage 中的信息

​ 相同浏览器的不同页面间可以共享相同的 localStorage（页面属于相同域名和端口）

​ 不同页面或标签页间无法共享 sessionStorage 的信息

4. cookie

​ 优点：1, 具有极高的扩展性和可用性

​ 2, 通过加密和安全传输技术，减少 cookie 被破解的可能性

​ 3，可以设置cookie的有效期

​ 缺点：1， cookie 的长度和数量的限制，cookie 长度不能超过 4KB，每个 domain 最多只能有 20 条 cookie

​ 2，安全性问题，cookie被人拦截就会获取到所有session的信息

​ cookie可以在服务器端与客户端交互使用

 //cookei设置的方法是document.cookie
var date = new Date('2021-12-21 00:00:00')
document.cookie="username=John Doe; expires=" + date
//删除cookie的方法就是expires的时间设置为当前时间之前的时间(就是给cookie设置一个过期了的有效时间)

//您还可以为 cookie 添加一个过期时间（以 UTC 或 GMT 时间）。默认情况下，cookie 在浏览器关闭时删除
document.cookie="username=John Doe; expires=Thu, 18 Dec 2043 12:00:00 GMT";

//可以使用 path 参数告诉浏览器 cookie 的路径。默认情况下，cookie 属于当前页面
document.cookie="username=John Doe; expires=Thu, 18 Dec 2043 12:00:00 GMT; path=/";

//读取cookie,将以字符串的方式返回所有的 cookie
var x = document.cookie;

5. web存储于cookie的区别

//sessionStorage localStorage 都是h5新增的web存储方法 存储空间在5m左右
//cookie的存储空间在4k左右 但是cookie存储的数据可以再服务器和客户端之前穿梭 
// 而且cookie可以设置过期时间 cookie也可以进行隔离
//sessionStorage 存储的数据在当前对话结束时自动删除 而且不同页面间不能共享
//localStorage 存储的数据没有过期时间 除非用户手动清除 而且页面间可以共享