• 完整demo可在線 查看 ： 希聲_music

• demo源碼 ： 訪問此處，作者： 翼遙bingo

文章目錄

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

一、 展示

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 安裝及部署 全過程

感謝網易云音樂!!!

• 可查看

網易云音樂API文檔

Github源碼

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。