存储分为cookie、本地存储和临时存储(会话存储)。
cookie的特点是存储量小受到限制,设置过期时间删除, 前后端自动同步。
本地存储的特点就是,存储的数据没有过期时间。
临时存储的特点就是存储的数据会在浏览器会话结束时被清除(即浏览器关闭时)。
而这三个特点也是cookie、本地存储和临时存储的区别。
: 永久存储(相对),其中的数据不随着浏览器的开关而改变
sessionStorage: 临时存储(相对), 当浏览器关闭时,数据消失(页面刷新时,不会受到影响)
cookie
1. cookie的构成
名称: 一个唯一确定的cookie的名称
值:存储在cookie中俄字符串值
域:cookie对于哪个域是最有效的
路径:指定域中的指定路径
失效时间:cookie何时应该被删除的时间戳
安全标志:指定后,cookie只有在使用SSL连接时才发送到服务器(设置secure标志)
2. cookie的限制
(1) 绑定在特定域名下,无法跨域
(2) 浏览器对cookie数量的限制规定不同(例如FF规定每个域名最多50个,而Safari和Chrome没有数量限制)
(3) 所有cookie的累加长度限制为4kB,超长则会被忽略
3. JS中的cookie
(1) 获取方式:返回当前页面可用的所有cookie的字符串,由分号和空格隔开的一系列名值对:(name1=value1;name2=value2)
(2) 添加:cookie的值必须写成key=value的形式,且等号两边不能有空格;写入时必须对分号、逗号和空格进行转义(encodeURIComponent()的方法);一次只能写入一个cookie,并且写入不是覆盖,而是添加;
(3) cookie的属性(除了cookie本身的内容,还有部分可选属性可以被写入,必须是都以分号开头)。
value:必须项,用于指定cookie的值;
expires:指定cookie的过期时间;
domain:指定cookie所在域名(只有访问的域名匹配domain属性,cookie才会发送到服务器);
path属性:指定路径,必须是绝对路径;
secure:指定cookie只能在加密协议HTTPS下发送到服务器;
httpOnly:设置该cookie不能被JS获取;
本地存储:window.localStorage
语法:myStorage = localStorage;返回一个Storage对象
添加:localStorage.setItem('key','value');
获取:localStorage.getItem('key');
移除:localStorage.removeItem('key');
清空:localStorage.clear();不接收参数,清空存储对象里的所有数据
要注意的是:各浏览器的localStorage容量上限不同
会话存储:window.sessionStorage
语法:myStorage = localStorage;f返回一个Storage对象
添加:localStorage.setItem('key','value');
获取:localStorage.getItem('key');
移除:localStorage.removeItem('key');
清空:localStorage.clear();不接收参数,清空存储对象里的所有数据
要注意的是:各浏览器的localStorage容量上限不同