localStorage

• (同域)同源策略限制

  请求与相应的协议、域名、端口都相同

  不同的域存储的内容不能互相访问(例如存在qq.com的不能访问存在baidu.com的)

• 存储的内容都是字符串格式，

  注意对象转字符串时可能会变object Object，所以要借助JSON.stringfy和parse方法，数组为了安全也借助JSON的方法。

• 有一个全局事件，storage事件，当storage数据发生改变的时候(增删改等)就会触发

  当前页面触发的storage事件只能由其他页面监听

  当前页面自己对storage进行操作不会触发storage事件，是一种广播特性事件

  用于实现页面间的一些通信或交互效果

  要通过window.addEventListener(‘storage’,()=>{})调用

  💡 注意这个事件可能不支持本地file协议，可能要用服务器环境才行

• 生命周期：存储的数据永久存在(其实在硬盘里)，刷新页面并不会丢失，除非你强制删除他们

sessionStorage

除了生命周期以外，其他特性和使用方法一致

==sessionStorage和localStorage区别==

• 同源访问区别

localStorage同一个域下多个页面文件可互通(e.g baidu.com/a.html和baidu.com/b.html)，但是sessionStorage同一个域下多个页面文件不可互通(localhost/a.html和localhost/b.html不可互通)

• storage事件区别

sessionStorage不支持storage事件

• 生命周期区别

localStorage永久保存,sessionStorage临时保存(浏览器关闭或者页签关闭又再开后就没掉了)

cookie

cookie和storage==最大最大的区别==: cookie用于前后端交互,storage更多地用作纯前端存储 cookie用于用户状态存储

cookie会主动在http请求中进行传输(自动) 这是特性

服务器端可以把一些非正文数据通过头信息中的cookie字段传给客户端(浏览器)

浏览器每次发送请求时会主动把请求相同域下的cookie数据通过头信息发给服务器

storage也可以在http请求中传输，但是需要手动传给服务器

cookie使用场景: 用户的登录状态

http协议的特点:无状态协议，多次请求之间不会有任何关联，即每次请求都是独立的

对服务器来说,第二次请求并不知道你第一次请求过啥,并不知道客户端干过啥

举个🌰

/login - 服务器验证通过了

/ 再次发请求 服务器并不认为你已经登录过

用户登录系统，其实就是希望在多次服务器请求之间能共享一种状态(登录成功的数据)(就像前端的localStorage那样共享)

服务器验证通过后，需要保存当前登录的该用户的状态数据，这个数据不能只保存在服务器

我们需要把这样的凭证信息保存到当前发请求的客户端上，这个数据很多时候都不在正文(body)里，我们会把这个数据通过头信息发给客户端(而不是body) -> Set-Cookie (服务器给客户端)

当浏览器从头信息中获取到Set-Cookie时就会主动存储在浏览器cookie中，以后的同域请求也会主动把cookie中的数据通过头信息发送给服务器 ->cookie (客户端给服务器)

通常会把比较敏感的数据cookie(例如密码和一些用户资料等)进行加密,和设置当前cookie的http-only属性为true,表示这个cookie只能用于http传输,不能通过js更改(浏览器中可以直接改)

一级域名指一个点，二级域名二个点，三级域名三个点

baidu.com 一级域名

www.baidu.com 二级域名

a.super.baidu.com 三级域名

cookie配置项

==path==

cookie可以设置域，cookie除了按照域名进行存储外(如baidu.com和qq.com)，还可以按路径进行存储(如baidu.com/a )，子域即斜线后带东西

子域(路径)的访问类似js作用域，比如cookieA设定了baidu.com/a，那么baidu.com访问不到,baidu.com/a才访问得到；cookieB设定了baidu.com，那么baidu.com和baidu.com/a都可以访问到。

==expires/max-age==

expires设置cookie到期时间 值为Date对象格式

max-age设置cookie有效期，值为number单位秒

expires过时了，现在推荐使用max-age

ctx.cookies.set(‘username’,‘myname’,{

​ domain: “baidu.com”,

​ path: ‘/a’,

​ maxAge: 3600,

​ httpOnly: false

})

==httpOnly==

默认为true,无法通过js去操作cookies,只有浏览器自己可以操作cookies

cookie的格式 不太方便使用 可以借助别人的插件或者自己封装下格式和方法

==cookie的删除==

前端没有直接删除方法，将max-age设置为0或-1

后端koa可以 ctx.cookies.set(‘usname’,null)

a链接无法发出post请求，需要表单form

a链接可以发get请求