客户端存储三种方式（cookie、localStorage、sessionStorage）用法及区别

客户端存储

cookie

• cookie是http协议下，服务端或者脚本可以维护客户端信息的一种方式。
• 原生js设置cookie

 document.cookie="key=value";

• 原生js获取cookie

console.log(document.cookie);

• koa中使用cookie

ctx.cookies.set(name, value, [options])

ctx.cookies.get(name, [options])

• 常用配置
  • key和 value是包含在一个字符串中
    • key包含字段
    • [name] 这个name为自己取的cookie名称，同名的值会覆盖
    • domain 所属域名
    • path 所属路径
    • Expires/Max-Age 到期时间/持续时间 (单位是秒)
    • http-only 是否只作为http时使用，如果为true，那么客户端能够在http请求和响应中进行传输，但时客户端浏览器不能使用js去读取或修改
  • 多个key=value使用 ; （分号）分隔
• 原生js封装cookie
  • 设置cookie

    function setCookie(name, value, options = {}) {
        let cookieData = `${name}=${value};`;
        for (let key in options) {
            let str = `${key}=${options[key]};`;
            cookieData += str;
        }
        document.cookie = cookieData;
    }
    setCookie("key",key,{"Max-Age":3600*24});
    

  • 获取cookie

    function getCookie(name) {
        let arr = document.cookie.split("; ");
        for (let i = 0; i < arr.length; i++) {
            let arr2 = arr[i].split("=");
            if (arr2[0] == name) {
                return arr2[1];
            }
        }
        return "";
    }
    key = getCookie("key");
    

• 应用场景：主要用于验证用户身份

localStorage

• 应用场景：浏览器本地长期存储，比如设置皮肤
• 设置

  localStorage.setItem("test", "测试文字");
  

• 读取

  localStorage.getItem("test");
  

• 删除某个

   localStorage.removeItem("test");
  

• 清除所有

  localStorage.clear();
  

sessionStorage

• 用法和 localStorage相同

三者的共同点及区别

共同点

• localStorage和sessionStorage和cookie共同点
  • 同域（同源策略）限制：同源策略：请求与响应的 协议、域名、端口都相同时同源，否则为 跨源/跨域；
  • 存储的内容都会转为字符串格式
  • 都有存储大小限制
• localStorage和sessionStorage共同点
  • API相同
  • 存储大小限制一样基本类似
  • 无个数限制

区别

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