11-cookie

1. cookie

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

1-1. koa中cookie的使用

• 储存cookie的值

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

• 获取cookie的值

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

1-2. cookie中options常用设置

• maxAge：表示此cookie从创建到过期所能存在的时间
• expires：cookie 过期的
• path：cookie 路径, 默认是'/'
• domain：cookie 域名
• secure：安全 cookie 设置后只能通过https来传递cookie
• httpOnly：服务器可访问 cookie, 默认是 true
• overwrite：一个布尔值，表示是否覆盖以前设置的同名的 cookie (默认是 false). 如果是 true, 在同一个请求中设置相同名称的所有 cookie

1-3. 登录案例【服务端使用cookie】

• 验证用户名密码是否正确
• 实现登录功能，通过记住我实现七天免登录

1-3-1. 存储登录状态

• 注：maxAge单位是毫秒

const bodyParder = require("koa-bodyparser");
const md5 = require("md5");

if (ctx.request.body.username === "张三" && ctx.request.body.pwd === "123") {
    if (ctx.request.body.memberMe) {
        let loginStatus = md5("张三" + "123");
        ctx.cookies.set("isLogin", loginStatus, {
            maxAge: 3600 * 1000 * 24 * 7
        })
    }
    ctx.redirect("/list");
}
else {
    ctx.redirect("/error");
}

1-3-2. 对比cookie值，实现自动跳转

let cookiesInfo = ctx.cookies.get("isLogin");
if (cookiesInfo) {
    let serverInfo = md5("张三" + "123");
    if(cookiesInfo === serverInfo){
        ctx.redirect("/list");
    }
}

1-4. 换肤案例【客户端使用cookie】

1-4-1. 客户端cookie的使用方式

• 设置cookie
• 注：Expires/Max-Age 到期时间/持续时间 (单位是秒)

document.cookie = "name=value;Max-Age=3600";

name和value是包含在一个字符串中;
name包含字段
· [name] 这个name为自己取的cookie名称，同名的值会覆盖
· domain 所属域名
· path 所属路径
· Expires/Max-Age 到期时间/持续时间 (单位是秒)
· http-only 是否只作为http时使用，如果为true，那么客户端能够在http请求和响应中进行传输，但时客户端浏览器不能使用js去读取或修改
多个name=value使用 ; （分号）分隔

• 获取cookie

document.cookie

1-4-2. 封装cookie

• 设置cookie

//设置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

//获取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 "";
}

1-4-3. 换肤实现

window.onload = function () {
    let colorArr = ["white", "rgb(204,232,207)", "rgb(200,200,169)", "rgb(114,111,128)"];
    let key = 0;
    if(getCookie("key")){
        key = getCookie("key");
    }
    document.body.style.background = colorArr[key];
    document.querySelector(".changeSkin").onclick = function () {
        key++;
        key = key > 3 ? 0 : key;
        setCookie("key", key, {
            "Max-Age": 3600 * 24
        })
        document.body.style.background = colorArr[key];
    }
}

2. 本地缓存Storage

• Storage 提供了访问特定域名下的会话存储或本地存储的功能，例如，可以添加、修改或删除存储的数据项；
• sessionStorage：操作一个域名的会话存储；
• localStorage：操作一个域名的本地存储；

2-1. localStorage及sessionStorage的使用

• 设置：添加或更新（如果数据项中已存在该key）数据项中指定key的value

setItem(key, value)

• 获取：获取数据项中指定key对应的value

getItem(key)

• 删除指定数据：删除数据项中指定key的value

removeItem(key) 

• 清空所有数据

clear() 

2-2. 通过localStorage实现换肤功能

• 通过cookie实现换肤功能需要设置到期时间，不符合换肤功能的需求
• 因此可以采用localStorage来更好地实现

window.onload = function () {
    let colorArr = ["white", "rgb(204,232,207)", "rgb(200,200,169)", "rgb(114,111,128)"];
    let key = 0;
    // 获取
    if (localStorage.getItem("key")) {
        key = localStorage.getItem("key");
    }
    document.body.style.background = colorArr[key];
    document.querySelector(".changeSkin").onclick = function () {
        key++;
        key = key > 3 ? 0 : key;
        // 设置
        localStorage.setItem("key", key);
        document.body.style.background = colorArr[key];
    }
}