1. cookie
浏览器存储技术。(服务器将少量数据交于浏览器存储管理)
作用: 存储数据, 解决 http 协议无状态问题
工作流程:
浏览器发送请求给服务器,请求登录
服务器返回响应给浏览器,此时携带了cookie(其中包含着当前用户的唯一标识)
浏览器接受到响应中cookie,得保存下来
浏览器下一次发送请求时,会自动携带上cookie,
服务器接受到请求,解析cookie,从而判断是哪个用户发送的请求(解决http协议无状态问题)
服务器端的使用:
设置 cookie res.cookie(key, value, options)
获取 cookie 引入第三方中间件解析 cookie-parser req.cookies
清除浏览器 cookie res.clearCookie(key)
前端使用:
document.cookie 读写二合一
清除 document.cookie = 'hello=123;expires=' + new Date(Date.now() - 1000);
特点:
cookie 数量有限制,同一个域名下大约 20 个左右(不同浏览器不一样)
cookie 大小有限制,每一个 cookie 最大值大约 4kb 左右(不同浏览器不一样)
2. session
也是一种解决 http 协议无状态问题的方案
不同的是:
session 存储位置是服务器
存储大小近乎无限
传输流量更小(只产生一个cookie)
① 创建xhr对象
② 绑定事件监听
onreadystatechange 会监听 readyState 值的变化,一旦发生变化,就会触发当前事件
③ 设置请求信息
xhr.open(请求方式, 请求地址) (get 请求参数在这写, 以 查询字符串 的方式)
④ 发送请求
xhr.send(body); (post 请求参数写在这儿,以 请求体参数 的方式)
问题:
chrome 和 firefox: 第二次 get 请求默认走协商缓存,状态码 304,还是会向服务器发送请求
ie:第二次 get 请求默认走强制缓存,状态码 200,不会向服务器发请求
解决:让每一次请求不一样,只要请求不一样,就不会走缓存
4. 谈谈readyState的值
0: xhr 对象创建成功,但是 xhr.open() 方法还未调用
1: xhr.open() 方法已经调用了,但是还未调用 xhr.send() 方法(意味着还没有发送请求,还可以设置请求头信息)
2: xhr.send() 方法已经调用了,接受到了部分响应数据(响应首行和响应头)
3: 接受了响应体数据(如果响应体数据较小或者是纯文本,在此阶段就全部接受完了)
4: 接受了全部响应体数据(数据较大或者音视频资源等)
5. 跨域
同源: 协议、域名、端口号 必须完全相同
同源策略 (Same-Origin Policy) 最早由 Netscape 公司提出,是浏览器的一种安全策略
违背同源策略就是跨域
解决最终原理:绕过浏览器的 ajax 引擎就 ok,所以后面还有服务器代理模式、Nginx 反向代理等方案
解决方案:
- jsonp
利用 script 标签能够跨域的特性解决跨域的
只能发送 get 请求, 兼容性好
步骤:
① 创建 script 标签
② 设置响应成功的回调函数
③ 设置 script 的src 属性
④ 将 script 添加到页面中生效
⑤ 服务器必须响应 callback(data) 格式数据
- cors