cookie: 全称http cookie
, 是客户端用来储存数据的方式。
优点是兼容性好,缺点是会增加网络流量,容量有限(4k),安全性差
web storage:
storage
分为session storage 和
local storagesession storage
限制于会话阶段,浏览器关闭后即失效
local storage``` 用于跨会话持久化本地存储
cookie 的用途及工作原理
用途,帮助web站点保存用户信息
工作原理:cookie
储存在硬盘中,每次用户访问某站点时,浏览器会将查找相应域名下的cookie
,如果存在,会自动将其添加到response head
的cookie
字段中,与http
请求一起发送到该站点。
查找并发送cookie
是浏览器行为,如果这些数据并不是必须的,势必会造成流量浪费,这是cookie
的缺点之一。
在浏览器端可以通过document.cookie
来访问cookie
cookie相关的值和属性:
name
value
domain
path
expires
其中:
domain
和path
确定了改cookie
可以被哪些页面使用domain
指向域名,path
表示路径,默认为/
expries / max-age 用来决定cookie的生命周期,也就是cookie何时会被删去;
在新的http协议中,使用max-age 替代 expries,max-age表示生效时长,单位为秒,如果max-age为负值,则表示在会话结束后失效即session,若为0,则表示删除cookiesecure是cookie的安全标志,决定是否只在安全协议(如https)下发送cookie。
httponly属性是用来限制客户端脚本对cookie的访问。将 cookie 设置成 httponly 可以减轻xss攻击的危害,防止cookie被窃取,以增强cookie的安全性。(由于cookie中可能存放身份验证信息,放在cookie中容易泄露)
客户端设置cookie
document.cookie = "name = vlaue[;expires=gmt][;domain=XXX][;path=/XXX][;secure]"
cookie 修改
name值、domain值、path值确定cookie(此三项不可修改)
value、expires、secure可以改
cookie 删除
cookie的删除其实特别简单,也是对此cookie重新赋值,上面介绍expries和max-age时也有提到,将expries设为一个过去的时间或将max-age设为0,都可以删除cookie。同时也要特别注意此cookie的domain、path要与原来保持一致。
cookie编码
若 cookie 的名或值中包含分号、逗号和空格这三个特殊字符,那么它需要经过URL编码。一般可以使用encodeURIComponent/decodeURIComponent或者encodeURI/decodeURI。若要给 cookie 指定额外的信息,只要将参数追加到该字符串(如下例)。
document.cookie = encodeURIComponent("test") + "=" + encodeURIComponent("myCookie") + "; max-age=3600";
cookie 缺点
- 安全性:由于cookie在HTTP中是明文传递的,其中包含的数据都可以被他人访问,可能会被篡改、盗用。
- 大小限制:cookie的大小限制在4KB左右,若要做大量存储显然不是理想的选择。
- 增加流量:cookie每次请求都会被自动添加到Request Header中,无形中增加了流量。cookie信息越大,对服务器请求的时间也越长。