网易云音乐-换肤代码演示

window.onload = function(){

    // 4.鼠标移入，显示添加按钮
    let uls = document.querySelectorAll(".listContainer");
    let spans = document.querySelectorAll(".btnController");
    
    uls.forEach((v,k)=>{
        v.onmouseover= function(){
            // console.log("dadf");
            spans.forEach((val,key)=>{
                if((key+1) == k){
                    spans[key].style.display = "block";
                }else{
                    spans[key].style.display = "none";
                }
            })
        }
    });

    // document.cookie = "key=2;Max-Age=3600";
    // document.cookie = "test3=test3;Max-Age=3600";
    // 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");
    // }

// 3.
    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;
        //客户端中，时效性的单位 为 秒
        // setCookie("key",key,{
        //     "Max-Age":3600
        // });
       
        localStorage.setItem("key",key);
        // localStorage.removeItem("指定删除");
        // localStorage.clear();
        document.body.style.background = colorArr[key];
    }

// 2. 换皮肤的数据持久化
// 封装： 1) 设置cookie 方法

function setCookie(name,value,options={}){
   let cookieData = `${name}=${value};`;
//    console.log(value);
   for(let key in options){
       let str = `${key}=${options[key]};`;
       //username=张三   maxAge = 7  http:true
       cookieData += str;
   }

   document.cookie = cookieData;
   console.log(document.cookie);
}

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++){
        //name=张三
        let arr2 = arr[i].split("=");
        //arr2 = [name,张三]
        if(arr2[0] == name){
            return arr2[1];
        }
    }
 }
}

function showDetail(musicData){
    console.log(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");
    }

}