阅读 129

关于http的琐碎笔记

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

复制代码

1560432903913

  1. 请求最多包含4部分,最少包含3部分(也就是请求正文部分可以为空)
  2. 第三部分永远是一个回车,用来区分第三部分和第四部分
  3. 动词有GET POST PUT PATCH DELETE HEAD OPTIONS等
  4. 这里的路径包括【查询参数】,但不包括【描点】
  5. 如果没有写路径,那么路径默认为/
  6. 第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特点

  1. 服务端通过设置响应头的Set-Cookie来设置Cookie
//这里用node演示
res.setHeader('Set-Cookie','user=admin');
复制代码
  1. 浏览器得到Cookie之后,每次请求都会带上Cookie
  2. 服务端读取到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缓存,不然用户不知道你网页更新的消息
复制代码

1560438195056

localStorage是啥

localStorage是H5新出的api,可以用来设置本地缓存

  • localStorage.getItem('name') 获取缓存内容
  • localStorage.setItem('name','hzw') 设置缓存
  • localStorage.clear()清除所有缓存

注意:

localStorage只能存String

所有存进去的内容,都会自动调用toString()的方法

localStorage.setItem('name',{name:'hzw'});
//({}).toString() [object Object]
复制代码

1560438707677

如果真的需要存进对象,那么就用json格式的

localStroage.setItem('name',JSON.stringify({name:'hzw'}));
//
复制代码

1560438834283

应用场景:

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在用户关闭页面时,就失效

结语

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

关注下面的标签,发现更多相似文章
评论