Cookie和web Storage --- cookie

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

cookie

其中：

• domain和path确定了改cookie可以被哪些页面使用domain指向域名，path表示路径，默认为/

• expries / max-age 用来决定cookie的生命周期，也就是cookie何时会被删去；
  在新的http协议中，使用max-age 替代 expries，max-age表示生效时长，单位为秒，如果max-age为负值，则表示在会话结束后失效即session，若为0，则表示删除cookie

• secure是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信息越大，对服务器请求的时间也越长。