HTTP协议、存储

一、前端数据交互与HTTP协议

1. 前后端通信

浏览器发送请求至后端，后端对请求进行响应

2. 前后端的通信方式

1. 通过html进行访问
2. 通过link、img、script、form等HTML的标签进行访问
3. Ajax&fetch

3. HTTP协议

• HTML、JS、CSS、图片等都是通过HTTP在服务器和浏览器之间传输
• HTTP是一个请求-响应协议

4. HTTP请求相应的过程

浏览器端发出请求，先从自己的缓存区找，看是否能查询到服务器的IP地址，如果可以直接访问服务器，如果不能，则到DNS域名解析服务器中去找服务器的IP，找到之后向服务器发送请求

5. HTTP报文

请求报文：请求头（包括起始行和报文）和请求体
响应报文：响应头（包括起始行和报文）和响应体

6. HTTP方法

(1) GET : 获取数据

(2) POST：创建数据

(3) PUT：更新数据

(4) DELETE：删除数据

【GET和POST方法的对比】

• GET和POST的语义不同，GET是获取数据，POST是创建数据
• GET方法通过地址在请求头传输数据，POST既可以通过请求头传输数据，也可以通过请求体传输数据
• 安全方面，两种传输数据的方法都不是很安全，用GET传输数据时，比如密码用户名很容易通过查看历史记录找到，一般传输密码等比较隐秘的信息都不用GET
• 传输数据大小问题，由于GET传输通过请求头中的起始行，也可以说传输数据放到html尾部，由于地址的长度是有限的一般只能传输几k的数据，而POST传输的数据量是比较大的

7.HTTP状态码

• 100-199 请求已被接受，需要继续处理
• 200-299 成功
• 300-399
  • 301 永久转移
  • 302 暂时转移
  • 304 不变
• 400-499 浏览器端问题
  • 404 页面无法访问
• 500-599 后端的问题

二、本地存储

1. Cookie

• 浏览器存储数据的一种方式
• 存储在用户本地，可以随着浏览器的每次请求发送到服务器

1.1 Cookie的用法

• 写入Cookie document.cookie='username=alex; max-age=5';
• 读取Cookie：对Cookie进行封装，将其封装为set，get，remove方法

1.2 Cookie的属性

• ① 名称（Name）和值（Value)
  • Cookie的名称和值缺一不可，其他属性可以使用默认值
  • 如果包含非英文字母时，写入时要用encodeURIComponent()编码
  • 如果写入时编码，读取时要用decodeURIComponent()解码
• ② 失效（到期时间）
  • 失效的Cookie，会被浏览器清楚
  • 如果没有设置失效时间，默认会话结束后，Cookie会被清除
  • 想Cookie产时间存在，可以设置Expires或者Max-Age
    • Expires值为Date时间，表示具体什么时间过期
    • Max-Age值为数字，表示当前时间加多少秒后过期，单位是秒
    • 如果设置Max-Age的值为0或者负数，则Cookie会被删除
• ③Domain
  • 限定了不同域下的访问Cookie的范围
  • 使用JS只能写入或读取当前域或者父域的Cookie，无法写入、读取其他域的Cookie
• ④Path
  • 限定了同域不同路径下访问cookie的范围
  • 使用JS只能写入或读取当前路径或者上级的Cookie，无法写入、读取其他路径的Cookie
• ⑤HttpOnly
  • 前端不能通过JS去设置一个HttpOnly类型的Cookie，这种类型的Cookie只能是后端来设置
  • 只要是HttpOnly类型的，通过document.cookie是获取不到的，也不能进行修改
• ⑥Secure
  • 限定了只有使用了https的情况下才可以发送到服务端
    【注意】1. 当Name、Domain、Path这三个字段都相同时，才是同一个Cookie；**2.**Domain、Path、Secure都要满足条件，还不能过期的Cookie才能随着请求发送到服务器端

1.3 Cookie的注意事项

• 前后端都可以写入和获取Cookie
• 每个域名下的Cookie数量有限
• 每个Cookie的存储容量很小，最多只有4KB左右

2. localStorage

• 浏览器存储数据的一种方式
• 存储在用户本地，不会发送到服务器端
• 单个域名下的总大小有限制（一般最大时5M左右）

2.1 localStorage的基本用法

• setItem()

localStorage.setItem('username','zhangsan');

• getItem()

localStorage.getItem('username');

• removeItem()

localStorage.removeItem('username');

• clear()

localStorage.clear();

• length

localStorage.length;

2.2 localStorage的注意事项

• localStorage存储的数据，除非手动清除，否则永远存在
• sessionStorage存储的数据，当会话结束时就会被清除
• local Storage存储的键和值只能是字符串类型，如果传入的是对象，他会自动将其转换为字符串形式（对象转换成字符串后的形式是[object,Object]）
• 不同的域名不能公用localStorage
• IE7及以下版本不支持local Storage，IE8开始支持