HTTP的格式
HTTP请求由四部分组成，分别是状态行，请求头，回车，请求正文
- 状态行：请求格式Method 资源路径URL 协议/版本号
- 请求头：包含访问的域名，Cookie，Content-Type，Content-Length等信息
- 回车
- 请求正文：就是HTTP向服务端发送的数据
1 动词 路径 协议/版本
2 key1:value1
2 key2:value2
2 key3:value3
2 Content-Type:application/x-www-form-urlencoded
2 Host:www.baidu.com
2 User-Agent:curl/7.54.0
3 回车用来区分请求头和请求正文
4 要上传的数据
- 请求最多包含4部分，最少包含3部分(也就是请求正文部分可以为空)
- 第三部分永远是一个回车，用来区分第三部分和第四部分
- 动词有GET POST PUT PATCH DELETE HEAD OPTIONS等
- 这里的路径包括【查询参数】，但不包括【描点】
- 如果没有写路径，那么路径默认为
/ - 第2部分中的Content-Type标注了第4部分的格式
HTTP响应格式与请求格式一样
在http的响应中
Content-Length:响应正文的长度，单位为KB
Content-Type:text/html 响应正文的格式
HTTP状态码
- 1xx Http请求已经接受，继续处理请求
- 2xx 表示成功
- 3xx 重定向
- 4xx 客户端错误
- 5xx 服务端错误
常见状态码的含义：
- 200---请求正常处理完成
- 301---永久重定向
- 302---临时重定向
- 304---请求正确，而服务端的资源没有改变，则直接用本地缓存的资源
- 400---客户端语法错误
- 401---请求未经授权
- 403---请求被拒，没有访问权限
- 404---请求的url不存在
- 500---服务端永久错误
- 503---服务端发生临时错误
Cookie特点
- 服务端通过设置响应头的Set-Cookie来设置Cookie
//这里用node演示
res.setHeader('Set-Cookie','user=admin');
- 浏览器得到Cookie之后，每次请求都会带上Cookie
- 服务端读取到http请求中的cookie就知道了登录用户的信息
if(req.headers.cookie.user=='admin'){
res.end("欢迎管理员");
}
cookie存在的问题：
- 不同浏览器不能公用同一个cookie，我在chrome拿到的cookie不能在Safrai上使用
- Cookie可以随便改，不安全
- Cookie存在盘的一个文件夹里
- 设置了cookie后，所有请求都会带上cookie
- cookie有效期默认是20分钟，后端可以强制改变时期
res.setHeader("Set-Cookie",'user=admin;max-age=300000；httpOnly');
//max-age可以改变cookie的有效期
//httpOnly禁止用户操作cookie
session和cookie的关系
为了不让用户去篡改cookie的值，我们可以把cookie的值存在服务端的一块内存中，这块内存叫做session，而拿到该cookie的值，需要一个随机的key值
let sessionId = Math.random()*100000;
sessions[sessionId] = {user:admin};
res.setHeader('Set-Cookie',`sessionId=${sessionId}`);
//当浏览器再次发送请求时，就会带上sessionId
let sessionId = req.headers.cookie.sessionId;
let user = sessions[sessionId]
if(user=='admin'){
res.end("欢迎管理员")；
}
- 所以session是基于cookie的，
- session是占用服务器内存的
- 当这个随机数越大，用户越不可能拿到别的用户的cookie值
Http缓存
web性能优化里有设置HTTP缓存这一条，不过是后端操作的
res.setHeader('Cache-Control','max-age=300');
//在30秒内，相同路径的http请求会指向本地的缓存，
//不会真正的发送请求，
//这一块在不断刷新网页时，我希望之前已经请求的资源不用再次请求时，可以设置
//首页一般不会设置http缓存，不然用户不知道你网页更新的消息
localStorage是啥
localStorage是H5新出的api，可以用来设置本地缓存
- localStorage.getItem('name') 获取缓存内容
- localStorage.setItem('name','hzw') 设置缓存
- localStorage.clear()清除所有缓存
注意：
localStorage只能存String
所有存进去的内容，都会自动调用toString()的方法
localStorage.setItem('name',{name:'hzw'});
//({}).toString() [object Object]
如果真的需要存进对象，那么就用json格式的
localStroage.setItem('name',JSON.stringify({name:'hzw'}));
//
应用场景：
localStorage一般用来持久化存储信息
var a = 1;
//在浏览器的窗口把a改为2；
//但再次刷新网页时，a又变为了1
//这就不能持久化的保存信息
let a = localStorage.getItem('a');
if(!a){
a=1;
}else{
a=(Number)a+1;
}
localStorage.setItem('a',a);
//每次刷新网页，a就会加1，这就是持久化存储信息
提示页面只提示一次
let already = localStorage.getItem('已经提示')；
if(!already){
localStorage.setItem('已经提示了'，true);
alter("该网页已经改版");
}
localStorage的特点：
- 跟HTTP无关
- HTTP不会带上localStorage
- 只有相同的域名的页面才能互相读取localStorage
- 每个域名localStorage最大存储量5MB左右
- 永久有效，除非手动清除缓存
sessionStorage也是H5的api
调用跟localStorage一样，特点只有第5条不同，sessionStorage在用户关闭页面时，就失效
结语
这是一篇笔记，写得不是很好，如果有错误的地方，还请看官们指正！感激不尽！
