理解HTTP协议与Cookie：存储机制与Web应用身份管理-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_44756776/article/details/115978478

cookie：为什么有cookie? — 能够长期存储数据
为什么需要长期存储数据呢?
重要性以及机制
web应用程序是用http协议进行传输的
http 上下文无关，无状态的协议 — 指的是同一个链接当中两个执行成功的请求之间是没有任何关系的(尽管是同一个url)
同一页面中的多次请求之间是没有关系的(客户端发送请求到服务器----服务器端正常处理—服务器端返回数据给客户端—客户端收到请求之后就断开与服务器之间的连接了)

        cookie原理
        1. 浏览器向服务器发出请求
        2. 服务器对浏览器的响应头中有一个设置:set-cookie (服务器设置,前端无法设置)
        3. 浏览器向服务器发送第二次请求的时候，会携带上次服务器给浏览器响应头中携带的cookie(被浏览器所保存到相应的域下面)
                服务器根据cookie辨别用户，可以修改cookie的内容
        
        cookie也有缺点：因为每次发送请求需要携带着cookie，所以最好类似登录信息这样的东西放在cookie里，其他的有其他的存储方法，以前没有其他的存储办法，导致了cookie的滥用;

在百度页面登录个人信息，会发现访问关联页面也会自动登录(百科，知道)
百度ID－用户信息　---- 与实际值不同的原因是因为被进行了加密(每次登录加密后的值都不同)
domain字段：表示该cookie对哪个域名有效的
如果这里的domain字段是一级域名(baidu.com)，则相对应的二级域名也是有效的(比如baike zhidao)

1. cookie不可跨域

有域名限制，仅仅存在于一级域名和二级域名

2. cookie存储在浏览器中

仅限于同一个浏览器

3. cookie存数量的限制

数量在50个左右
大小在4kb左右 — 超过了该大小浏览器就会进行删除(不同的浏览器可能会采用不同的删除策略–LRU FIFO…)

4. cookie的存储时间非常灵活

5. cookie不光可以服务器设置，客户端也可以设置

// document.cookie //可读可写
// 键值对---key: value

document.cookie = 'name=yourName';
document.cookie = 'name=yourName; age=18';  //这样设置age不会生效，document.cookie这种方法只能设置一次cookie
// 必须是http协议

cookie的属性

name : cookie的名字 — 惟一性(后面的会覆盖前面的值)
value : cookie的值字符串类型
domain ：设置cookie在哪个域下是有效的
path ：cookie的路径 (有效使用的路径) 和domain结合使用，规定cookie只能在相应的url下使用

expires :cookie的过期时间 GMT 具体的时间点，到xxx年xx月xx日过期，没有设置的话cookie是回话级别的cookie，页面一关闭就失效；设置的话expires = new Date(xx年, xx月, xx日);

记得new Date()的月份是从0开始计算的;

max-age : cookie的有效期时间段(以s为单位)
-1 临时cookie
0 cookie已经过期
正数表示cookie有效期的时间段 --从创建cookie开始计算，控制台cookie展示的时候也许并不是多少s就后删除，但是功能上是准确的;
```
 24小时为86400s;
```
HttpOnly :有这个标记的cookie 前端是无法获取的
Secure : 设置cookie只能通过Https协议传输
SameSite :用来设置cookie在跨域请求的时候不能被发送

删除cookie通过expires属性来设置

var cookieManage = {
            setCookie: function (name, value, maxAge) {
                document.cookie = `${name}=${value};max-age=${maxAge};`;
            },
            deleteCookie: function (name) {
                document.cookie = this.setCookie(name, '', 0);
            },
            getCookie:function (name) {
                var cookies = document.cookie;
                var cookieArr = cookies.split('; ');
                for(var i = 0;i < cookieArr.length; ++i) {
                    var moniker = cookieArr[i].split('=');
                    if(moniker[0] === name) {
                        return moniker[1];
                    }
                }
            }
        };
        cookieManage.setCookie('name', 'dulate', 100000);
        cookieManage.setCookie('age', 19, 100000);
        console.log(cookieManage.getCookie('name'));

web Storage：web本地化存储方案

存储大小在5Mb左右，谷歌可以存10Mb;

这个和HTTP协议无任何关系，不会增加系统开销，localStorage没有时间限制，只能手动删除;

webStorage继承自Storage对象;

和cookie的共同特征：无法跨域，个性化设置以及表单的历史记录，购物车记录，游戏记录等都是由localStorage存储的

localStorage对象的属性
1. length:本地存储数据的数量
2. key()：通过索引找到存储的数据–方法比较鸡肋，存储的时候索引和本地存储不一致;
3. getItem():通过键名，取到本地存储的数据
4. setItem():设置一个本地存储数据–两个参数，键值对形式,会将第二个参数进行隐式类型转换(转为字符串);存储object类型数据时使用JSON.stringify(value),取数据的时候JSON.parse(localStorage.getItem(name));
5. removeItem():删除一个本地存储数据，参数为存储数据的name值
6. clear():清空本地存储数据
除了手动删除本地存储的数据，浏览器Application localStorage页面也有删除按钮，也可以进入浏览器的无痕模式，然后关闭该无痕模式页面，数据即会被清空。
sessionStorage:会话级别的存储(回话结束，数据失效，离开当前窗口，数据失效)

ajax要求的是http协议

restful API

restfulAPI是一种互联网软件架构的设计规范、设计指南、设计风格、设计原则

API
rest：Resouce　Representational State Transfer-表述性状态传递，一种软件架构风格，现在软件开发大多都基于这种开发;
1. resource：资源,每种资源都会对应一种URI(统一资源标识符，是一个字符串，用来表示互联网资源的名称)
URL：统一资源定位器，他是一种具体的URI，类似与URI的实例
1. Representational：表现层，一个资源有多种表现形比如文本可以通过text,html,json,二进制…
2. State Transfer 状态转化

restful API具体规范

协议：
要求通信方式是Https的协议
域名:
尽量要把API部署到专用的域名之下,http://www.baidu.com—API专用域名：http://api.baidu.com，但是数量少一半都放到https://www.baidu.com/api/
版本
https://api.baidu.com/v1;v1表示版本1
路径
需要的是名词，而且需要与数据库表的名字相呼应
https://api.baidu.com/v1/blogs;
方法
1. GET 获取资源
  GET https://api.baidu.com/v1/blogs;//获得所有的文章
2. POST 添加资源
  POST： https://api.baidu.com/v1/blogs/is;//添加文章
3. PUT：修改资源 (客户端需要提供改变后的完整资源)
  https://api.baidu.com/v1/blogs;//添加所有的文章
4. PATCH 更新资源 (客户端需要提供改变的属性)
  https://api.baidu.com/v1/blogs;//该更新所有的文章
5. DELETE 删除资源
  https://api.baidu.com/v1/blogs;//删除所有的文章
数据过滤
1. ?limit=10 指定返回数据的数量
  GET https://api.baidu.com/v1/blogs?limit=10
2. ?offset=10 指定一个偏移量
  GET https://api.baidu.com/v1/blogs?offset=10
3. ?page=2&per_page=10 指定第几页，以及每页的数量
  GET https://api.baidu.com/v1/blogs?page=2&per_page=10
4. ?sortby=time&order=arc 指定返回结果按照哪个属性排序，以及排序的方式
  GET https://api.baidu.com/v1/blogs?sortby=time&order=arc
状态码
返回结果
1. GET 资源对象列表(数组)，如果取的是一条数据，那返回一个对象
2. POST 返回添加后的资源对象，以及有可能会加上是否成功
3. PUT 返回添加后的资源对象，以及有可能会加上是否成功
4. PATCH 返回更新后的资源对象，以及有可能会加上是否成功
5. DELETE 返回空，以及有可能会加上是否成功
返回的数据格式
尽量使用json,避免使用xml