客户端存储——存储到cookies

const Koa = require("koa");
const Router = require("koa-router");
const static = require("koa-static");
const views = require("koa-views");
const koaBody = require("koa-body");
const md5 = require("md5");
let musicData = require("./data/music.json");

let app = new Koa();
let router = new Router();

app.use(koaBody());
app.use(static(__dirname + "/static"));
app.use(views(__dirname + "/views", {
    extension: "pug"
}));

router.get("/", ctx => {
    ctx.redirect("/login");
});
router.get("/login", async ctx => {

    // 判断是否存过账号密码
    let cookiesInfo = ctx.cookies.get("isLogin");

    if (cookiesInfo) {
        // 判断一下加密信息
        let serverInfo = md5("张三" + "123");
        if (cookiesInfo == serverInfo) {
            ctx.redirect("/list");
        };
    };

    await ctx.render("login");
});
// 跳转到检查页面
router.post("/checkUser", async ctx => {
    // 跳转到检查页面
    // console.log(ctx.request.body);  //ctx.request.body : 是koa-body中的方法，用来获取参数的
    // console.log(ctx.require);

    // 判断用户名与密码是否正确
    if (ctx.request.body.username == "张三" && ctx.request.body.pwd == "123") {

        // 当页面登录成功时在保存账号密码到cookies
        if (ctx.request.body.rememberMe) {

            let loginStatus = md5("张三" + "123");

            ctx.cookies.set("isLogin", loginStatus, {//  字段名 实际的值 当前cookies的配置信息
                // 时效性：60分*60秒*1000————毫秒*24小时*7=7天有效期
                maxAge: 3600 * 1000 * 24 * 7
            });
        }

        // 跳转到list页面
        ctx.redirect("/list")
    } else {
        // 跳转到错误页面
        ctx.redirect("/error");
    }
});
// 定义list页面
router.get("/list", async ctx => {
    await ctx.render("list",{
        musicData
    });
});
// 定义error页面
router.get("/error", async ctx => {
    await ctx.render("error");
});
// 定义详情页面
router.get("/detail",async ctx=>{
    await ctx.render("detail");
});


app.use(router.routes());
app.listen(8080);

// detail.js
localStorage.setItem("isOpen",true);

//当页面关闭的时候 清除 isOpen
window.addEventListener("beforeunload",function(){
    localStorage.removeItem("isOpen");
});

window.addEventListener("storage",function(){
    updateView();
});

window.onload = function(){
    updateView();

    // 清空列表
    document.querySelector(".deleteAll").onclick = function(){
        console.log(1)
        localStorage.removeItem("musicData");
        updateView();
    };

    // 删除勾选项
    document.querySelector(".deleteItem").onclick = function(){
        let inputs = document.querySelectorAll(".exchange input");
        let musicData = JSON.parse(localStorage.getItem("musicData"));

        inputs.forEach((v,k)=>{
            if(v.checked){
                musicData.splice(k,1);
            }
        });
        // 更新数据
        localStorage.setItem("musicData",JSON.stringify(musicData));
        // 更新视图
        updateView();
    }

}

// 更新视图
function updateView(){
    
    let musicData = localStorage.getItem("musicData");

    if(musicData){
        musicData = JSON.parse(musicData);
        let innerContent = "";
    
        musicData.forEach(v=>{
            let str = `<ul class="myul">
                            <input type="checkbox" />
                            <li>${v.songName}</li>
                            <li>${v.singer}</li>
                            <li>${v.time}</li>
                        </ul>`;
            innerContent += str;
        });
        document.querySelector(".exchange").innerHTML = innerContent;
    }else{
        document.querySelector(".exchange").innerHTML = "";
    }
}

// list.js
window.onload = function () {

    // 功能四  鼠标移入显示添加按钮
    let uls = document.querySelectorAll(".listContainer");
    let spans = document.querySelectorAll(".btnController");

    uls.forEach((v, k) => {

        v.onmouseover = function () {
            spans.forEach((val, key) => {
                if ((key + 1) == k) {
                    spans[key].style.display = "block";
                } else {
                    spans[key].style.display = "none";
                }
            })
        }
    })

    // document.cookie = "text=text;Max-Age=3600";
    // document.cookie = "text3=text;Max-Age=3600"
    // this.console.log(document.cookie)

    // 1. 客户端使用 cookie (换皮肤)
    let colorArr = ["white", "rgb(204,232,207)", "rgb(200,200,169)", "rgb(114,111,128)"];

    let key = 0;
    // if(getCookie("key")){
    //     key = getCookie("key")
    // }

    if (localStorage.getItem("key")) {
        key = localStorage.getItem("key");
    }

    document.body.style.backgroundColor = colorArr[key];

    document.querySelector(".changeSkin").onclick = function () {
        key++;
        key = key > 3 ? 0 : key;
        // setCookie("key",key,{
        //     "Max-Age":3600
        // });

        localStorage.setItem("key", key)
        // localStorage.removeItem("指定删除")
        // localStorage.clear();//删除

        document.body.style.backgroundColor = colorArr[key];
    }

    // 2. 换皮肤的时间持久化
    // 封装 1） 设置cookies 方法
    function setCookie(name, value, options = { "Max-Age": 3600 * 24 * 7 }) {
        let cookieData = `${name}=${value};`;

        for (let key in options) {
            let str = `${key}=${options[key]};`;
            // username=张三 maxAge=3600*1000*24*7
            cookieData += str;
        }

        document.cookie = cookieData;
    }

    function getCookie(name) {
        // 多条cookie 会以  ；+ 空格    的形式来分割
        // cookie ='name=张三; age=20; sex=男'

        let arr = document.cookie.split("; ");
        // arr = ['name=张三','age=20','sex=男']

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

            let arr2 = arr[i].split("=");
            // arr2 =[name,张三,age,20,sex,男]
            if (arr2[0] == name) {
                return arr2[1];
            }
        }
    }

}

function showDetail(musicData) {
    // 开启详情页面
    // 储存音乐信息

    if(localStorage.getItem("musicData")){
        let localData = JSON.parse(localStorage.getItem("musicData"));
        
        //去重
        if(!localData.find(v=>v.id==musicData.id)){
            localData.push(musicData);
            localStorage.setItem("musicData",JSON.stringify(localData));
        }
    } else {
        localStorage.setItem("musicData",JSON.stringify([musicData]));
    }

    if (!localStorage.getItem("isOpen")) {
        window.open("/detail");
    };


}