前端本地存储

http协议无状态、非持久性连接

传统的cookie

用户端保存请求信息的机制
分号分隔的多个key-value字段
存储在本地的加密文件里
域名与路径限制，一个请求只能操作自身有权限的cookie

• cookie常见属性
  name:cookie名称
  domain:cookie生效的域名，二级域名可以使用一级域名的cookie，不可以使用其它二级的及三级的
  path:cookie生效的路径
  expires(Expires/Max-Age):cookie过期时间，如果不指定，cookie会在会话结束后被删除，即关闭浏览器页面
  HttpOnly:用户端不可修改（js脚本无法读取，可在Application的cookie内查看）

//前端
//查看cookie
document.cookie
//添加cookie
document.cookie='name=hf;age=18'
document.cookie='name=hf;domain=helloworld.com;path=/index.html;expires=Mon, 05 Mar 2019 02:29:14 GMT'
//修改同上，注意域名与path对应匹配
//删除cookie,将expires设为已过期时间即可
document.cookie='name=hf;domain=helloworld.com;path=/index.html;expires=Mon, 05 Mar 2017 02:29:14 GMT'

建议使用browser-cookies库来简化cookie操作

npm install browser-cookies

usage

import cookies from 'browser-cookies'
 
cookies.set('firstName', 'Lisa');
cookies.set('firstName', 'Lisa', {expires: 365}); // Expires after 1 year
cookies.set('firstName', 'Lisa', {secure: true, domain: 'www.example.org'});
 
cookies.get('firstName'); // Returns cookie value (or null)
 
cookies.erase('firstName'); // Removes cookie

H5本地存储

有时候只是本地需要存储一些数据，却并不需要发送到服务端，放在cookie里不合适

• localStorage
  有域名限制，不存在作用域概念，完全匹配
  只有key-value基础类型，如果使用了对象等引用类型，它会将对象转换成字符串，建议存储JSON.stringify转换后的字符串
  没有过期时间
  浏览器关闭不消失
• sessionStorage
  同上
  浏览器关闭消失

localStorage.setItem('name','hfimy')
localStorage.getItem('name')
localStorage.removeItem('name')
localStorage.setItem('a',JSON.stringify({name:'hh',age:2,obj:{name:'adsfa'}}))
JSON.parse(localStorage.getItem('a'))

session

服务端保存请求信息的机制
sessionId（一般是数据库表中的主键，唯一索引）通常存放在cookie里（Set-Cookie）;也可以放在请求参数，或者http头部里面，开辟一个token字段

fetch请求默认不携带cookie，需要在option里设置{credentials:'include'}，一般登录成功后response-header会有一个set-cookie字段在浏览器添加缓存，请求时request-header里会携带该cookie来标识用户登录状态，注销成功后response-header里会通过set-cookie来清除cookie