http和cookie

HTTP

• http 是我们前后台交互的时候的传输协议（即超文本传输协议）

常见的 HTTP 响应状态码

• 在一个 HTTP 请求的响应报文中的状态行会有一个响应状态码
• 这个状态码是用来描述本次响应的状态的
• 通常会出现五种状态码
  1. 100 ~ 199
  2. 200 ~ 299
  3. 300 ~ 399
  4. 400 ~ 499
  5. 500 ~ 599

100 ~ 199

• 一般我们看不到，因为表示请求继续

• 100： 继续请求，前面的一部分内容服务端已经接受到了，正在等待后续内容

• 101： 请求者已经准备切换协议，服务器页表示同意

200 ~ 299

• 2 开头的都是表示成功，本次请求成功了，只不过不一样的状态码有不一样的含义（语义化）
• 200： 标准请求成功（一般表示服务端提供的是网页）
• 201： 创建成功（一般是注册的时候，表示新用户信息已经添加到数据库）
• 203： 表示服务器已经成功处理了请求，但是返回的信息可能来自另一源
• 204： 服务端已经成功处理了请求，但是没有任何数据返回

300 ~ 399

• 3 开头也是成功的一种，但是一般表示重定向
• 301： 永久重定向
• 302： 临时重定向
• 304： 使用的是缓存的数据
• 305： 使用代理

400 ~ 499

• 4 开头表示客户端出现错误了
• 400： 请求的语法服务端不认识
• 401： 未授权（你要登录的网站需要授权登录）
• 403： 服务器拒绝了你的请求
• 404： 服务器找不到你请求的 URL
• 407： 你的代理没有授权
• 408： 请求超时
• 410： 你请求的数据已经被服务端永久删除

500 ~ 599

• 5 开头的表示服务端出现了错误
• 500： 服务器内部错误
• 503： 服务器当前不可用（过载或者维护）
• 505： 请求的协议服务器不支持

常见的 HTTP 请求方式

• 每一个 HTTP 请求在请求行里面会有一个东西叫做请求方式
• 不同的请求方式代表的含义不同
  1. GET： 一般用于获取一些信息使用（获取列表）
  2. POST： 一般用于发送一些数据给服务端（登录）
  3. PUT： 一般用于发送一些数据给服务当让其添加新数据（注册）
  4. DELETE： 一般用域删除某些数据
  5. HEAD： 类似于 GET 的请求，只不过一般没有响应的具体内容，用于获取报文头
  6. CONNECT： HTTP/1.1 中预留的方式，一般用于管道链接改变为代理的时候使用
  7. PATCH： 是和 PUT 方式类似的一个方式，一般用于更新局部数据
  8. OPTIONS： 允许客户端查看服务端性能
• 我们比较常用的就是 GET 和 POST

COOKIE

• cookie 是一个以字符串的形式存储数据的位置
• 每一个 HTTP 请求都会在请求头中携带 cookie 到服务端
• 每一个 HTTP 响应都会在响应头中携带 cookie 到客户端
• 也就是说，cookie 是不需要我们手动设置，就会自动在 客户端 和 服务端之间游走的数据
• 我们只是需要设置一下 cookie 的内容就可以

COOKIE 的特点 服务器环境运行

cookie可以实现跨页面全局变量
cookie可以跨越同域名下的多个网页，但不能跨域使用
cookie会随着HTTP请求自动发送给服务器
cookie会存储于访问者的计算机中可以设置有效期限
存储空间为 4KB / 50 条左右

操作使用

f12———》Application_>Strorage——》Cookies——》目的地
设置cookie

document.cookie = 'user2=xiaohong'//添加
document.cookie = 'user2=xiaowang'//修改

设置有效期

var d = new Date()
d.setDate(d.getDate()+2)
document.cookie = 'user3=xiaofang; expires='+d

设置path路径

document.cookie = 'user5=xiaohua; path=/test/2010'

设置cookie的域名

var d =new Date()
d.setDate(d.getDate()+2)
document.cookie = 'user3=xiaodong;domain=127.0.0.1; expires='+d

COOKIE 操作封装

• 因为 js 中没有专门操作 COOKIE 增删改查的方法
• 所以需要我们自己封装一个方法

cookie封装

localStorage:为永久性保存数据，不会随着浏览器的关闭而消失
按域名进行存储，可以在同域名下跨页面访问，不会和其他域名冲突
按键值对存储：key/value

ocalStorage.setItem(key , value) 保存或设置数据
如果key已经存在，则覆盖key对应的value
如果不存在则添加key与value

localStorage.setItem('uaer','xm')

localStorage.getItem(key) 获取key对应的value
如果key不存在则返回null

console.log(localStorage.getItem('uaer') );  //xm

localStorage.key(index) 获取指定下标位置的key，不存在返回null

localStorage.setItem('uaer','xm')    
localStorage.setItem('user1','xz')    
localStorage.setItem('user2','xh')    
console.log(localStorage.key(1));  //获取key值  user2

localStorage.length 获取数据条数（长度）
配合key(index)方法可以实现遍历localStorage数据的方法

localStorage.setItem('uaer','xm')    
localStorage.setItem('user1','xz')    
localStorage.setItem('user2','xh')    
console.log(localStorage.length);  //获取长度  3

遍历

localStorage.setItem('user1','xm')
localStorage.setItem('user2','xh')
localStorage.setItem('user3','xw')
for (var i = 0, len = localStorage.length; i < len; i++){  
console.log( localStorage.getItem( localStorage.key(i) ) )}

localStorage.clear() 将同域名下的所有数据都清空

 localStorage.setItem('uaer','xm')    
 localStorage.setItem('user1','xz')    
 localStorage.setItem('user2','xh')    localStorage.clear();  //显示无任何数据

localStorage.removeItem(‘key’) 删除某个键值对

localStorage.setItem('uaer','xm')    
localStorage.setItem('user1','xz')    
localStorage.setItem('user2','xh')    localStorage.removeItem('user1'); 

sessionStorage:为临时性保存数据，当页面关闭就会消失
局限当前标签页，不能跨页面访问