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
网友评论