客户端存储 - 如何实现客户端 免登陆 / 换肤 / 添加音乐列表 等数据的保存

实现客户端 免登陆 / 换肤 / 添加音乐列表 等数据的保存

通常情况下，提交数据都会使用到表单
表单的提交方式，及自定义地址到可以将数据直接发送到后端

表单数据提交与接收

前端将数据发送到后台

	<form action="/checkUser" method="post" onsubmit="return false;">
		姓名：<input class="inputStyle" id="username" type="text" name="username" /><br />
		密码：<input class="inputStyle" id="pwd" type="password" name="pwd" /><br />
		<input class="loginStyle" id="sub" type="submit" value="登录" />
	</form>
	

• action= " /checkUser "
  指定提交的路由名称为 "/checkUser "
• method= " post "
  指定提交的方式为 "post"

前端将数据发送到后台

我们需要做的

• 新建后端路由去接收数据
• 引入 koa-body 模块，去识别数据（ 依据 表单中控件的 name 名 ）
  后端中使用 ctx.request.body 去获取数据值

	const koaBody = require("koa-body"); // 引入
	app.use(koaBody()); // 使用
	
	// 注意提交方式 - 请求数据，使用 get 则会导致信息会直接显示在 web - url 的位置
	router.post("/checkUser",async ctx=>{ 
	    // ctx.request.body koa-body 中的方法，用来获取参数
	    if( ctx.request.body.username == "秦兟" && ctx.request.body.pwd == "123"){    
			console.log("用户名及密码正确") // 在终端的位置显示
	        // 跳转到list页面
	        ctx.redirect("/list");
	    }else{
	        // 跳转到错误页面
	        ctx.redirect("/error")
	    }
	})

---

客户端 免登陆

后端服务器 - 保存数据 cookies.set

会使用到 cookie 来保存数据，但需要注意：

• 保存的数据为正确的信息
• cookie 数据会暴露在url中，需要加密
• 有三个参数
  • 属性值
  • 属性名
  • 配置信息（主要是保存时长，单位为毫秒） 必填

引入 md5模板 对数据进行加密

	
	const md5 = require("md5");
	
	// 如果 rememberMe 属性存在
	if(ctx.request.body.rememberMe){
		let loginStatus = md5("秦兟"+"123");
		//               属性名    属性值      配置
		ctx.cookies.set("isLogin",loginStatus,{
			// 时效性  单位 毫秒
			maxAge : 3600*1000*24*7
		});        
	}
	

后端服务器 - 获取数据 cookies.get

cookie 可以保存数据，同时也能被获取到

	router.get("/login",async ctx =>{
	    let cookieInfo = ctx.cookies.get("isLogin");
	    if ( cookieInfo ) { // cookieInfo 登录数据存在 且 数据正确 
	        let serverInfo = md5("秦兟"+"123")
	        if ( serverInfo == cookieInfo ) {
	            ctx.redirect("/list"); // 加载 list 页面
	        }
	    }
	    await ctx.render("login.pug"); // 加载 login 页面
	})
	

---

客户端 换肤

前端使用 cookie 存取皮肤数据

	
	// 皮肤数据持久化
    function setCookie(name,value,options={"Max-Age":3600*24}){
        let cookieData = `${name}=${value};`;
        //               username = 秦兟
        for(let key in options){
            let str = `${key}=${options[key]};`;
            //          maxAge = 7 http:true
            cookieData += str;
        }       
        document.cookie = cookieData;
    }
-----------------------------------------------------------------
    
    function getCookie (name){
        // 多条cookie会以 ;+空格 的形式来分割
        let arr = document.cookie.split("; ");
        for(let i = 0 ; i < arr.length ; i++){
            // test = test
            let arr2 = arr[i].split("=");
            // arr2 = [,];
            if (arr2[0] == name) {
                return arr2[1]
            }
        }
    }
    

前端使用 localStorage 存取皮肤数据

本地存储 localStorage 永久存储

	// 存数据
	localStorage.setItem("key",key);
	
	// 获取数据
    if (localStorage.getItem("key")) {
        key = localStorage.getItem("key");
    }
	

---

客户端 添加音乐列表

html页面准备（ pug模板 ）

    each val,key in musicData
      //-                  这里 有空格
      ul(class = "listContainer " + (key%2==0?"grayBg":""))
        li.grayWord #{key+1}
        li #{val.songName}
        li #{val.album}
        li.grayWord #{val.time}
        span(class="btnController" οnclick="showDetail("+JSON.stringify(val)+")")
          a(href='#')
            img(src='img/play.png')
          img(src='img/add.png')

JS功能代码准备

    
    // 储存音乐信息
    // 去重
    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"); // 打开新的页面
    }
    

切换到详情页时 设置

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