cookie、sessionStorage和localStorage的区别

点击打开视频讲解

cookie

概念

cookie数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递。
而sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。
cookie数据还有路径（path）的概念，可以限制cookie只属于某个路径下,存储的大小很小只有4K
左右。（key：可以在浏览器和服务器端来回传递，存储容量小，只有大约4K左右）
1
2
3
4

cookie的优点：具有极高的扩展性和可用性

通过良好的编程，控制保存在cookie中的session对象的大小
通过加密和安全传输技术，减少cookie被破解的可能性
只有在cookie中存放不敏感的数据，即使被盗取也不会有很大的损失
控制cookie的生命期，使之不会永远有效。这样的话偷盗者很可能拿到的就 是一个过期的cookie
1
2
3
4

cookie的缺点：

cookie的长度和数量的限制。每个domain(领域，范围)最多只能有20条cookie，
每个cookie长度不能超过4KB，否则会被截掉
安全性问题。如果cookie被人拦掉了，那个人就可以获取到所有session信息。加密的话也不起什么
作用
有些状态不可能保存在客户端。例如，为了防止重复提交表单，我们需要在服务端保存一个计数器。
若把计数器保存在客户端，则起不到什么作用
1
2
3
4
5
6

cookie的作用

• 保存用户登录状态。例如将用户id存储于一个cookie内，这样当用户下次访问该页面时就不需要重新登录了，现在很多论坛和社区都提供这样的功能。cookie还可以设置过期时间，当超过时间期限后，cookie就会自动消失。因此，系统往往可以提示用户保持登录状态的时间：常见选项有一个月、三个 月、一年等。
• 跟踪用户行为。例如一个天气预报网站，能够根据用户选择的地区显示当地的天气情况。如果每次都需要选择所在地是烦琐的，当利用了 cookie后就会显得很人性化了，系统能够记住上一次访问的地区，当下次再打开该页面时，它就会自动显示上次用户所在地区的天气情况。因为一切都是在后 台完成，所以这样的页面就像为某个用户所定制的一样，使用起来非常方便
• 定制页面。如果网站提供了换肤或更换布局的功能，那么可以使用cookie来记录用户的选项，例如：背景色、分辨率等。当用户下次访问时，仍然可以保存上一次访问的界面风格。

cookie代码实现方式

添加cookie

//添加cookie
addCookie(){
	document.cookie = "username=mochengxiya"
	document.cookie = "age=18"
},
1
2
3
4
5

结果：

读取cookie

//读取cookie
readCookie(){
	let msg = document.cookie
	console.log('读取cookie',msg);
},
1
2
3
4
5

结果：

添加过期时间

Cookie的过期与删除本质是一回事. 当服务端想让客户端删除一个cookie时, 它会给客户端颁发一个
同名cookie(此时一般会将value设置成空白字符串), 只是这个cookie的存活时间已经过期(通过
设置Expires或Max-Age).

Cookie有两个属性可以用于控制存活时长: Expires 和 Max-Age. Expires指定一个时间点, 超过
这个时间点之后客户端Cookie过期
(将会由浏览器清除). Max-Age指定浏览器自从收到该cookie后可以保存多少时间, 单位是秒.

所有浏览器都支持Expires.
新的浏览器都会支持Max-Age, 并且它优先级比Expires更高.
老版本IE只能识别Expires.
1
2
3
4
5
6
7
8
9
10
11

// 添加过期时间（单位：天/秒）
addExpirationTime(){
	// age它是一个本地时区的，所以，主要原因是这个过期时间是本地时区，所以没办法失效，
	// 用toGMTString()转换为 GMT 时区。就可以正常失效清除cookie了
	let d = new Date(new Date().getTime() + 30000)			//设置过期时间
	document.cookie = "username=mochengxiya;"+"expires="+d.toGMTString()	//username可以失效清空缓存
	document.cookie = "age=18;"+"expires="+d								//age失效不可以清空缓存
},
1
2
3
4
5
6
7
8

删除cookie

deleteCookie(){
	let d = new Date(new Date().getTime() - 30000)
	document.cookie = "username=mochengxiya;"+"expires="+d.toGMTString()
}
1
2
3
4

sessionStorage

仅在当前会话下有效，关闭页面或浏览器后被清除。
存放数据大小为一般为5MB,而且它仅在客户端（即浏览器）中保存，不参与和服务器的通信。
源生接口可以接受，亦可再次封装来对Object和Array有更好的支持
1
2
3

session代码实现方式

添加session

// 1、保存数据到本地
// 第一个参数是保存的变量名，第二个是赋给变量的值
sessionStorage.setItem('Author', 'session');
1
2
3

结果：

取、删、清除所有session

// 2、从本地存储获取数据
sessionStorage.getItem('Author');
 
// 3、从本地存储删除某个已保存的数据
sessionStorage.removeItem('Author');
 
// 4、清除所有保存的数据
sessionStorage.clear();
1
2
3
4
5
6
7
8

引用数据存储

上面都是对于简单的数据类型的存储，但当要存储的数据是一个对象或是数组的时候，
直接存储是不行的。
1
2

错误的存储：

let user = {
    username: 'mochengxiya',
    password: '123456'
};
sessionStorage.setItem('user', user);
console.log(sessionStorage.getItem('user'));
1
2
3
4
5
6

结果：

这个时候，就需要转换数据格式。

存储数据前：利用JSON.stringify将对象转换成字符串

获取数据后：利用JSON.parse将字符串转换成对象
1
2
3

var user = {
    username: 'liu',
    password: '123456'
};
user = JSON.stringify(user);
sessionStorage.setItem('user', user);
 
let data = sessionStorage.getItem('user');
console.log(JSON.parse(data));
1
2
3
4
5
6
7
8
9

结果：

localStorage

localStorage生命周期是永久，除非主动清除localStorage信息，否则这些信息将永远存在。
存放数据大小为一般为5MB,而且它仅在客户端（即浏览器）中保存，不参与和服务器的通信。
1
2

// 1、保存数据到本地
// 第一个参数是保存的变量名，第二个是赋给变量的值
localStorage.setItem('Author', 'local');
 
// 2、从本地存储获取数据
localStorage.getItem('Author');
 
// 3、从本地存储删除某个已保存的数据
localStorage.removeItem('Author');
 
// 4、清除所有保存的数据
localStorage.clear();
1
2
3
4
5
6
7
8
9
10
11
12

注意：引用数据存储也是要存储数据前：利用JSON.stringify将对象转换成字符串，获取数据后：利用JSON.parse将字符串转换成对象