• 完整demo可在線(xiàn) 查看 ： 希聲_music

• demo源碼 ： 訪(fǎng)問(wèn)此處，作者： 翼遙bingo

文章目錄

• • 一、 展示
  • • • 1-1 登錄樣式展示
      • 1-2 代碼思路展示
      • 1-3 代碼目錄結(jié)構(gòu)展示【使用了LayUI(一款強(qiáng)大的彈窗庫(kù))】
  • 二、 代碼詳解【注釋超詳細(xì)】
  • • • 2-1 Index.html
      • 2-2 function.js
      • 2-3 api.js
  • 三、如何清除本地瀏覽器的Cookie數(shù)據(jù)【Google】
  • 四、 關(guān)于Cookie，sessionStorage和localStorage的區(qū)別
  • 五、 關(guān)于網(wǎng)易云API的部署，可查看如下博客

一、 展示

1-1 登錄樣式展示

1-2 代碼思路展示

1-3 代碼目錄結(jié)構(gòu)展示【使用了LayUI(一款強(qiáng)大的彈窗庫(kù))】

二、 代碼詳解【注釋超詳細(xì)】

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><!-- 登錄彈窗展示的內(nèi)容 --><div id="login-page" hidden>請(qǐng)輸入手機(jī)號(hào)： <input id="loginInput1" type="text" placeholder="請(qǐng)輸入電話(huà)號(hào)碼"><br> 請(qǐng)輸入密碼：　 <input id="loginInput2" type="password" placeholder="請(qǐng)輸入密碼"></div><!-- 獲取后端數(shù)據(jù)模塊 --><script src="./js/api.js"></script><!-- 主題功能模塊 --><script src="./js/function.js"></script>

2-2 function.js

/*************************************************** 希聲_music 封裝函數(shù)和交互功能 文件V1.0* 編寫(xiě)：翼遙bingo(https://blog.csdn.net/hannah2233)* 時(shí)間：2022-1-27*************************************************/ // 存儲(chǔ)全局變量 var xsN = [];$(function() {$("#user-login").on("click", "#loginClick", function() {layer.open({type: 1,title: "用戶(hù)輸入",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: '登錄網(wǎng)易云音樂(lè)賬號(hào)即可'})}});})userLogin();})// 點(diǎn)擊登錄區(qū)域 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);}// 讀取本地存儲(chǔ)信息 // 參數(shù) ： 鍵值 // 返回 : 數(shù)據(jù) 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)); }// 本地瀏覽器存儲(chǔ)登錄用戶(hù) function playerSavedata(key, data) {key = 'byntt_' + key; // 添加前綴，防止串用data = JSON.stringify(data); // 對(duì)象格式轉(zhuǎn)為JSON格式if (window.localStorage) {// 在本地存儲(chǔ)一個(gè)鍵值對(duì)localStorage.setItem(key, data);} else {Cookie.write(key, data);}}

2-3 api.js

/*************************************************** 希聲_music ajax請(qǐng)求后臺(tái)數(shù)據(jù) 文件V1.0* 編寫(xiě)：翼遙bingo(https://blog.csdn.net/hannah2233)* 時(shí)間：2022-1-27*************************************************///api訪(fǎng)問(wèn)地址，可修改 let global_api = "https://netease-cloud-music-api-crete722p-hannah-bingo.vercel.app";/* header區(qū)域的函數(shù)調(diào)用*/ // ajax加載用戶(hù)的個(gè)人信息 // 參數(shù) ： 賬號(hào)，密碼 function _ajaxUser(user) {if (_verify(user)) {$.ajax({type: "POST",url: global_api + "/login/cellphone",data: `phone=${user.phone}&password=${user.password}`,// 同步請(qǐng)求，報(bào)錯(cuò)// ache: false,// 設(shè)置跨域也報(bào)錯(cuò)，離譜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("密碼或者賬號(hào)有誤，請(qǐng)重新輸入");}// 請(qǐng)求成功之后自動(dòng)刷新用戶(hù)列表},error: function(reason) {console.log(reason);}})// POST請(qǐng)求方法二// $.post(global_api + "/login/cellphone", `phone=${user.phone}&password=${user.password}`).then((res) => {// console.log(res);// }).catch((res) => {// console.log(res);// })} }// 登陸驗(yàn)證 function _verify(user) {//做一個(gè)簡(jiǎn)單的驗(yàn)證// console.log(user.password);if (user.phone == null || user.phone == "") {layer.msg('請(qǐng)輸入手機(jī)號(hào)', { anim: 6 });return false;} else if (user.password == null || user.password == "") {layer.msg('請(qǐng)輸入密碼', { 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; }// 獲取用戶(hù)詳情 function _ajaxUserInfo(id) {$.ajax({type: "get",url: global_api + "/user/detail",data: `uid= ${id}`,success: function(res) {console.log(res);xsN.uid = id; // 記錄已同步用戶(hù)的id// console.log(xsN.uid);xsN.uname = res.profile.nickname;xsN.avatar = res.profile.backgroundUrl;// 本地瀏覽器存儲(chǔ)登錄用戶(hù)playerSavedata('uid', xsN.uid);playerSavedata('uname', xsN.uname);playerSavedata('avatar', xsN.avatar);userLogin();}}) }

三、如何清除本地瀏覽器的Cookie數(shù)據(jù)【Google】

四、 關(guān)于Cookie，sessionStorage和localStorage的區(qū)別

【這屬實(shí)背面經(jīng)才知道的東西】

• cookie數(shù)據(jù)

  • 始終在同源的http請(qǐng)求中攜帶，即cookie在瀏覽器和服務(wù)器間來(lái)回傳遞；
  • cookie數(shù)據(jù)還有路徑的概念，可以限制。
  • cookie數(shù)據(jù)不能超過(guò)4K，只適合保存很小的數(shù)據(jù)，如回話(huà)標(biāo)識(shí)
  • 作用域是在所有同源窗口中共享
  • 數(shù)據(jù)有效期： 只在設(shè)置的cookie設(shè)置的時(shí)間之前有效

• localStorage ：

  • 存儲(chǔ)大小5M->更大
  • 數(shù)據(jù)有效期始終有效
  • 在所有同源窗口都是共享的

• SessionStorage ：

  • 存儲(chǔ)大小5M->更大
  • 數(shù)據(jù)有效期不同：僅在當(dāng)前的瀏覽器窗口關(guān)閉有效
  • 不在不同的瀏覽器窗口中共享，即使時(shí)同一個(gè)頁(yè)面

五、 關(guān)于網(wǎng)易云API的部署，可查看如下博客

網(wǎng)易云音樂(lè)API 安裝及部署 全過(guò)程

感謝網(wǎng)易云音樂(lè)!!!

• 可查看

網(wǎng)易云音樂(lè)API文檔

Github源碼

總結(jié)

以上是生活随笔為你收集整理的原生JS实现登录功能，本地Cookie保存登录信息---【调用网易云API接口】---超详细讲解的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。