cookie，localStorage，sessionStorage的区别

cookie，localStorage，sessionStorage的区别

1.localStorage

特点：

1. 存储控件是5M

2. 存储条数受存储空间影响

3. 可以增删改查

4. 存储的数据只支持字符串（重点！！！！！）

   • JSON.parse(json格式字符串)
   • JSON.stringify()

5. 遵循同源策略

6. 只要在同源的网址里面，localStorage里面的数据可以共享

7. 会一致存在浏览器中，除非主动销毁removeItem() / clear()

常用的方法：

window.localStorage.setItem(key,value);//设置存储的内容
window.localStorage.getItem(key);//获取内容
window.localStorage.removeItem(key);//删除内容
window.localStorage.clear();//清空内容

同源策略

两个网址是否同源，取决于 http协议，域名/ip地址，端口号是否全都一致

url的组成

http协议，域名/IP地址，端口号，路径，查询参数/动态参数

2.sessionStorage

特点：

1. 生命周期为关闭当前浏览器窗口

2. 可以在同一个窗口下访问

3. 数据大小为5M左右

4. 临时存储：当浏览器关闭或者标签页关闭的时候，就会销毁本地的存储内容

5. 存储的数据类型：和localStorage一样只能是字符串

6. sessionStorage：不符合同源 策略

7. 不支持数据共享，同源页面也不支持数据共享

常用的方法：

window.sessionStorage.setItem(key,value);//设置存储的内容
window.sessionStorage.getItem(key);//获取内容
window.sessionStorage.removeItem(key);//删除内容

3.cookie

特点

1. 存储在客户端，不占用服务器资源
2. 存储量有限，一般为4KB
3. 只能是字符串格式

cookie的组成

• key：键

• value：值

• domain：域，表达这个cookie是属于哪个网站的

• path：路径，表达这个cookie是属于该网站的哪个基路径的，就好比是同一家公司不同部门会颁发不同的出入证。比如/news，表示这个cookie属于/news这个路径的。

• secure：是否使用安全传输

• expire：过期时间，表示该cookie在什么时候过期

4.cookie，localStorage，sessionStorage的区别

特性	cookie	localStorage	sessionStorage
生命周期	可以设置失效时间，没有设置的化，默认为是关闭浏览器后失效	除非被清除，否则永久保存	仅在当前会话下有效，关闭页面或者浏览器后被清除
存放数据大小	4k左右	一般为5MB	一般为5MB
HTTP请求	每次都会携带在HTTP头中，如果使用cookie保存过多数据会带来性能问题	仅在客户端（即浏览器）中保存，不参与和服务器通信	仅在客户端（即浏览器）中保存，不参与和服务器通信
易用性	需要自己封装，原生的cookie接口不友好	原生接口可以接受，也可以再次封装	原生接口可以接受，也可以再次封装