三大存储总结

一、cookie

1、cookie的构成

名称：一个唯一确定cookie的名称
值：存储在cookie中的字符串值
域：cookie对于哪个域是有效的
路径：指定域中的指定路径
失效时间：cookie何时应该被删除的时间戳
安全标志：指定后cookie只有在使用SSL连接时才发送到服务器（设置secure标志）

2、cookie的限制

绑定在特定域名下，无法跨越
浏览器对cookie数量的限制规定不同
所有cookie的累加长度限制为4KB，超长会被忽略

3、JS中的cookie

document.cookie

获取：
返回当前页面可用的所有cookie的字符串
由分号和空格隔开的一系列名值对
(name1=value1; name2=value2; )

添加：
cookie的值必须写成key=value的形式，且等号两边不能有空格
写入时必须对分号、逗号和空格进行转义
一次只能写入一个cookie,并且写入不是覆盖，而是添加
cookie的属性
(除了cookie本身的内容，还有部分可选
属性可以被写入，必须都以分号开头)

cookie的属性
value必需项，用于指定cookie的值
expires指定cookie过期时间
domain指定cookie所在域名 只有访问的域名匹配domain属性,cookie才会发送到服务器
path属性指定路径，必须是绝对路径
secure指定cookie只能在加密协议https下发送
到服务器
httpOnly设置该cookie不能被JS读取

二、window.localStorage（本地存储）

特点：存储的数据没有过期时间

语法: myStorage = localStorage;
返回一个Storage对象

添加: localStorage.setltem('key', 'value');

获取: localStorage.getltem('key');

移除: localStorage.removeltem('key');

清空: localStorage.clear();
不接收参数,清空存储对象里的所有数据

注:各浏览器支持的localStorage容量上限不同

三、window.sessionStorage（会话存储）

特点：存储的数据会在浏览器会话结束时被清除(即浏览器关闭时)

语法: myStorage = sessionStorage;
返回一个Storage对象

添加: sessionStorage.setltem('key', 'value');

获取: sessionStorage.getltem('key');

移除: sessionStorage.removeltem('key');

清空: sessionStorage.clear();
不接收参数,清空存储对象里的所有数据

注:各浏览器支持的sessionStorage容量上限不同

三者区别：

1、cookie存储量小受到限制，设置过期时间删除，前后端自动同步
2、localStorage 存储量大，需手动删除
3、sessionStorage 临时存储，关闭浏览器自动删除