客户端存储(cookie/Storage)

一. cookie

  cookie是http协议下，服务端或者脚本可以维护客户端信息的一种方式

koa中cookie的使用

  储存cookie的值：ctx.cookies.set(name,value,[option])
  获取cookie的值：ctx.cookies.get(name,[option])
option常用设置
  1.maxAge 一个数字表示从Data.new()得到的毫秒数
  2.expires cookie 过期的 Date
  3.path cookie 路径, 默认是'/'
  4.domain cookie 域名
  5.secure 安全 cookie 设置后只能通过https来传递cookie
  6.httpOnly 服务器可访问 cookie, 默认是 true
  7.overwrite 一个布尔值，表示是否覆盖以前设置的同名的 cookie (默认是 false).
  如果是 true, 在同一个请求中设置相同名称的所有 Cookie

客户端使用cookie

 特点：
  1.浏览器会主动存储接收到的 set-cookie 头信息的值
  2.有时效性；
  3.可以设置 http-only 属性为 true 来禁止客户端代码（js）修改该值
 设置：document.cookie="key=value"key和value是包含在一个字符串中
 key包含字段
  -[name] 这个name为自己取的cookie名称，同名的值会覆盖
  -domain 所属域名
  - path 所属路径
  - Expires/Max-Age 到期时间/持续时间 (单位是秒)
  - http-only 是否只作为http时使用，如果为true，那么客户端能够在http请求和响应中进行传输，但是
    客户端浏览器不能使用js去读取或修改
  -多个key=value使用 ; （分号+空格）分隔
 获取：document.cookie
  返回值是当前域名下的所有cookie，并按照某种格式组织的字符串 ：key=value;key1=value1;…
  keyn=valuen
封装cookie

二. 本地缓存Storage

localStorage及sessionStorage的使用

1.设置
 localStorage/sessionStorage.setItem(key,value)
 添加或更新（如果数据项中已存在该key）数据项中指定key的value
2.获取
 localStorage/sessionStorage.getItem(key)
 获取数据项中指定key对应的value
3.移除指定项
 localStorage/sessionStorage.removeItem(key)
 删除数据项中指定key的value
4.清空所有数据
 localStorage/sessionStorage.clear()
 清空所有数据项

Storage和cookie共同点

• 同域（同源策略）限制：同源策略：请求与响应的 协议、域名、端口都相同 则时同源，否则为 跨源/跨域
• 存储的内容都会转为字符串格式
• 都有存储大小限制

localStorage和sessionStorage的共同点

• API相同
• 存储大小限制一样基本类似
• 无个数限制

三. 不同点

localStorage
 没有有效期，除非删除，否则一直存在
 同域下页面共享
 支持 storage 事件
sessionStorage
 浏览器关闭，自动销毁
 页面私有
 不支持 storage 事件
cookie
 浏览器也会在每次请求的时候主动组织所有域下的cookie到请求头 cookie 中，发送给服务器端
 浏览器会主动存储接收到的 set-cookie 头信息的值
 可以设置 http-only 属性为 true 来禁止客户端代码（js）修改该值
 可以设置有效期 (默认浏览器关闭自动销毁)(不同浏览器有所不同)
 同域下个数有限制，最好不要超过50个(不同浏览器有所不同)
 单个cookie内容大小有限制，最好不要超过4000字节(不同浏览器有所不同)