cookie / 服务端cookies / 本地客户端cookies

cookie

        cookie是http协议下，服务端或者脚本可以维护客户端信息的一种方式。

---

koa中cookie的使用

        1.储存cookie的值

                ctx.cookies.set(name, value, [options])

        2.获取cookie的值

                ctx.cookies.get(name, [options])

        3.options常用设置

                - `maxAge` 一个数字表示从 Date.now() 得到的毫秒数

                - `expires` cookie 过期的 `Date`

                - `path` cookie 路径, 默认是`'/'`

                - `domain` cookie 域名

                - `secure` 安全 cookie  设置后只能通过https来传递cookie

                - `httpOnly` 服务器可访问 cookie, 默认是 **true**

                - `overwrite` 一个布尔值，表示是否覆盖以前设置的同名的 cookie (默认是 **false**). 如果是 true, 在同一个请求中设置相同

                    名称的所有 Cookie

 

设置cookie

        1.要在服务器头部中允许携带凭证

        2.设置cookie

        3.前端设置允许凭证

Access-Control-Max-Age用来指定本次预检请求的有效期，单位为秒，在此期间不用发出另一条预检请求。(预检请求)

        发送预检请求

---

客户端cookie使用方式

    设置

                document.cookie="key=value"

                key和value是包含在一个字符串中

                      key包含字段

                          - [name] 这个name为自己取的cookie名称，同名的值会覆盖

                          - domain 所属域名

                          - path 所属路径

                          - Expires/Max-Age 到期时间/持续时间 (单位是秒)

                          - http-only 是否只作为http时使用，如果为true，那么客户端能够在http请求和响应中进行传输，但时客户端浏览器不能使用js                              去读取或修改

                多个key=value使用 ; （分号）分隔

 

    获取

                document.cookie

                返回值是当前域名下的所有cookie，并按照某种格式组织的字符串 ：key=value;key1=value1;......keyn=valuen

 

    封装

                设置cookie封装

    function setCookie(name,value,options={}){

        let cookieData = `${name}=${value};`;

        for(let key in options){

            let str = `${key}=${options[key]};`;

            cookieData += str;

        }

        document.cookie = cookieData;

    }

 

                获取cookie

    function getCookie(name){

        let arr = document.cookie.split("; ");

        for(let i=0;i<arr.length;i++){

            let items = arr[i].split("=");

            if(items[0]==name){

                return items[1];

            }

        }

        return "";

    }

客户端操作cookie特点

        - 浏览器会主动存储接收到的 set-cookie 头信息的值

        - 有时效性；

        - 可以设置 http-only 属性为 true 来禁止客户端代码（js）修改该值

---