1.localStorage
特点：
存储控件是5M
存储条数受存储空间影响
可以增删改查
-
存储的数据只支持字符串（重点！！！！！）
- JSON.parse(json格式字符串)
- JSON.stringify()
遵循同源策略
只要在同源的网址里面，localStorage里面的数据可以共享
会一致存在浏览器中，除非主动销毁removeItem() / clear()
常用的方法：
window.localStorage.setItem(key,value);//设置存储的内容
window.localStorage.getItem(key);//获取内容
window.localStorage.removeItem(key);//删除内容
window.localStorage.clear();//清空内容
同源策略
两个网址是否同源，取决于 http协议，域名/ip地址，端口号是否全都一致
url的组成
http协议，域名/IP地址，端口号，路径，查询参数/动态参数
url的组成.png
2.sessionStorage
特点：
生命周期为关闭当前浏览器窗口
可以在同一个窗口下访问
数据大小为5M左右
临时存储：当浏览器关闭或者标签页关闭的时候，就会销毁本地的存储内容
存储的数据类型：和localStorage一样只能是字符串
sessionStorage：不符合同源 策略
不支持数据共享，同源页面也不支持数据共享
常用的方法：
window.sessionStorage.setItem(key,value);//设置存储的内容
window.sessionStorage.getItem(key);//获取内容
window.sessionStorage.removeItem(key);//删除内容
3.cookie
特点
- 存储在客户端，不占用服务器资源
- 存储量有限，一般为4KB
- 只能是字符串格式
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接口不友好 | 原生接口可以接受，也可以再次封装 | 原生接口可以接受，也可以再次封装 |
