原生JS实现登录功能，本地Cookie保存登录信息---【调用网易云API接口】---超详细讲解

• 完整demo可在线 查看 ： 希声_music

• demo源码 ： 访问此处，作者： 翼遥bingo

一、 展示

1-1 登录样式展示

1-2 代码思路展示

1-3 代码目录结构展示【使用了LayUI(一款强大的弹窗库)】

二、 代码详解【注释超详细】

2-1 Index.html

	<span id="user-login">
                    <!-- <a id="loginClick" href="javascript:void(0);">登录</a> -->
                    <!-- <img src="" alt="" id="user-awatar">
                    <span id="user-name">翼遥bingo</span> -->
	 </span>
 <!-- 登录弹窗展示的内容 -->
    <div id="login-page" hidden>
        请输入手机号： <input id="loginInput1" type="text"  placeholder="请输入电话号码">
        <br> 请输入密码：　 <input id="loginInput2" type="password"  placeholder="请输入密码">
    </div>
    <!-- 获取后端数据模块 -->
    <script src="./js/api.js"></script>

    <!-- 主题功能模块 -->
    <script src="./js/function.js"></script>

2-2 function.js

/**************************************************
 * 希声_music 封装函数和交互功能 文件V1.0
 * 编写：翼遥bingo(https://blog.csdn.net/hannah2233)
 * 时间：2022-1-27
 *************************************************/
// 存储全局变量
var xsN = [];

$(function() {
    $("#user-login").on("click", "#loginClick", function() {
        layer.open({
            type: 1,
            title: "用户输入",
            area: "300px",
            skin: 'layui-layer-rim',
            shadow: 0.5,
            btn: ['提交', '取消', "帮助"],
            content: $("#login-page"),
            yes: function(index, layero) {
                _ajaxUser({
                    phone: $("#loginInput1").val(),
                    password: $("#loginInput2").val()
                })
                layer.close(index);
            },
            btn3: function(index, layero) {
                layer.open({
                    title: '自行查找',
                    shade: 0.6,
                    anim: 4,
                    content: '登录网易云音乐账号即可'
                })
            }
        });
    })
    userLogin();

})


// 点击登录区域
function userLogin() {
    var loginHtml;
    if (playerReaddata('uid')) {
        loginHtml = `<img src="${xsN.avatar}" alt="" id="user-awatar">
        <span id="user-name">${xsN.uname}</span>`;
    } else {
        loginHtml = `<a id="loginClick" href="javascript:void(0);">登录</a>`;
    }
    $('#user-login').html(loginHtml);

}

// 读取本地存储信息
// 参数 ： 键值
// 返回 :  数据
function playerReaddata(key) {
    if (!window.localStorage) return '';
    key = "byntt_" + key; // 添加前缀，防止串用
    xsN.uname = JSON.parse(window.localStorage ? localStorage.getItem('byntt_uname') : Cookie.read('byntt_uname'));
    xsN.avatar = JSON.parse(window.localStorage ? localStorage.getItem('byntt_avatar') : Cookie.read('byntt_avatar'));
    return JSON.parse(window.localStorage ? localStorage.getItem(key) : Cookie.read(key));
}

// 本地浏览器存储登录用户
function playerSavedata(key, data) {
    key = 'byntt_' + key; // 添加前缀，防止串用
    data = JSON.stringify(data); // 对象格式转为JSON格式
    if (window.localStorage) {
        // 在本地存储一个键值对
        localStorage.setItem(key, data);
    } else {
        Cookie.write(key, data);
    }

}

2-3 api.js

/**************************************************
 * 希声_music ajax请求后台数据 文件V1.0
 * 编写：翼遥bingo(https://blog.csdn.net/hannah2233)
 * 时间：2022-1-27
 *************************************************/

//api访问地址，可修改
let global_api = "https://netease-cloud-music-api-crete722p-hannah-bingo.vercel.app";


/* 
header区域的函数调用
 */
// ajax加载用户的个人信息
// 参数 ： 账号，密码
function _ajaxUser(user) {
    if (_verify(user)) {
        $.ajax({
                type: "POST",
                url: global_api + "/login/cellphone",
                data: `phone=${user.phone}&password=${user.password}`,
                // 同步请求，报错
                // ache: false,
                // 设置跨域也报错，离谱
                success: function(res) {
                    console.log(res);
                    // 本地存入token
                    // localStorage.setItem('access_token', res['access_token']);
                    if (res.code >= 200 && res.code < 300) {
                        layer.msg("登陆成功！");
                        _ajaxUserInfo(res.profile.userId);
                    } else {
                        layer.msg("密码或者账号有误，请重新输入");
                    }
                    // 请求成功之后自动刷新用户列表

                },
                error: function(reason) {
                    console.log(reason);
                }
            })
            // POST请求方法二
            // $.post(global_api + "/login/cellphone", `phone=${user.phone}&password=${user.password}`).then((res) => {
            //         console.log(res);
            //     }).catch((res) => {
            //         console.log(res);
            //     })
    }
}

// 登陆验证
function _verify(user) {
    //做一个简单的验证
    // console.log(user.password);
    if (user.phone == null || user.phone == "") {
        layer.msg('请输入手机号', { anim: 6 });
        return false;
    } else if (user.password == null || user.password == "") {
        layer.msg('请输入密码', { anim: 6 });
        return false;
    } else if (user.password.length < 6 || user.password.length > 12) {
        layer.msg('密码是6-12位', { anim: 6 });
        return false;
    } else return true;
}

// 获取用户详情
function _ajaxUserInfo(id) {
    $.ajax({
        type: "get",
        url: global_api + "/user/detail",
        data: `uid= ${id}`,
        success: function(res) {
            console.log(res);
            xsN.uid = id; // 记录已同步用户的id
            // console.log(xsN.uid);
            xsN.uname = res.profile.nickname;
            xsN.avatar = res.profile.backgroundUrl;
            // 本地浏览器存储登录用户
            playerSavedata('uid', xsN.uid);
            playerSavedata('uname', xsN.uname);
            playerSavedata('avatar', xsN.avatar);

            userLogin();
        }
    })
}

三、如何清除本地浏览器的Cookie数据【Google】

四、 关于Cookie，sessionStorage和localStorage的区别

【这属实背面经才知道的东西】

• cookie数据

  • 始终在同源的http请求中携带，即cookie在浏览器和服务器间来回传递；
  • cookie数据还有路径的概念，可以限制。
  • cookie数据不能超过4K，只适合保存很小的数据，如回话标识
  • 作用域是在所有同源窗口中共享
  • 数据有效期： 只在设置的cookie设置的时间之前有效

• localStorage ：

  • 存储大小5M->更大
  • 数据有效期始终有效
  • 在所有同源窗口都是共享的

• SessionStorage ：

  • 存储大小5M->更大
  • 数据有效期不同：仅在当前的浏览器窗口关闭有效
  • 不在不同的浏览器窗口中共享，即使时同一个页面

五、 关于网易云API的部署，可查看如下博客

网易云音乐API 安装及部署 全过程

感谢网易云音乐!!!

• 可查看

1. 网易云音乐API文档
2. Github源码