关于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 要上传的数据

复制代码

/

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特点

1. 服务端通过设置响应头的Set-Cookie来设置Cookie

//这里用node演示
res.setHeader('Set-Cookie','user=admin');
复制代码

2. 浏览器得到Cookie之后，每次请求都会带上Cookie
3. 服务端读取到http请求中的cookie就知道了登录用户的信息

if(req.headers.cookie.user=='admin'){
    res.end("欢迎管理员");
}
复制代码

cookie存在的问题：

1. 不同浏览器不能公用同一个cookie，我在chrome拿到的cookie不能在Safrai上使用
2. Cookie可以随便改，不安全
3. Cookie存在盘的一个文件夹里
4. 设置了cookie后，所有请求都会带上cookie
5. 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("欢迎管理员")；
}
复制代码

1. 所以session是基于cookie的，
2. session是占用服务器内存的
3. 当这个随机数越大，用户越不可能拿到别的用户的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的特点：

1. 跟HTTP无关
2. HTTP不会带上localStorage
3. 只有相同的域名的页面才能互相读取localStorage
4. 每个域名localStorage最大存储量5MB左右
5. 永久有效，除非手动清除缓存

sessionStorage也是H5的api

调用跟localStorage一样，特点只有第5条不同，sessionStorage在用户关闭页面时，就失效

结语

这是一篇笔记，写得不是很好，如果有错误的地方，还请看官们指正！感激不尽！