js是实现记住密码自动填充功能
记住密码自动填充
- 使用js实现记住密码功能,在下次打开登陆页面的时候进行获取并自动填充到页面【cookie和localStorage】
使用js实现记住密码功能,在下次打开登陆页面的时候进行获取并自动填充到页面【cookie和localStorage】
//添加功能----记住上一个登陆成功的账号密码// Cookie操作函数function setCookie(name, value, days) {let expires = "";if (days) {const date = new Date();date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));expires = "; expires=" + date.toUTCString();}document.cookie = name + "=" + (value || "") + expires + "; path=/; Secure; SameSite=Lax";}function getCookie(name) {const cookieName = name + "=";const decodedCookie = decodeURIComponent(document.cookie);const cookieArray = decodedCookie.split(';');for (let i = 0; i < cookieArray.length; i++) {let cookie = cookieArray[i];while (cookie.charAt(0) === ' ') {cookie = cookie.substring(1);}if (cookie.indexOf(cookieName) === 0) {return cookie.substring(cookieName.length, cookie.length);}}return null;}function deleteCookie(name) {document.cookie = name + '=; expires=Thu, 01 Jan 1970 00:00:01 GMT; path=/;';}//部分浏览器不支持cookie的存储/获取,所以两种方法结合// 替代方案:使用 localStoragefunction setStorage(key, value, days) {const data = {value: value,expires: days ? Date.now() + days * 86400000 : null}localStorage.setItem(key, JSON.stringify(data));}function getStorage(key) {const data = JSON.parse(localStorage.getItem(key));if (!data) return null;if (data.expires && Date.now() > data.expires) {localStorage.removeItem(key);return null;}return data.value;}
登录成功后保存账号密码
setCookie('savedUsername', account, 1);
setCookie('savedPsd', password, 1);
setStorage('savedUsername', account, 1);
setStorage('savedPsd', password, 1);
页面加载完成自动填充
window.onload = function () {var ooun =getCookie('savedUsername');var oops = getCookie('savedPsd'); if (ooun != null) {console.log("getcookie执行");document.getElementById('account').value = ooun;} else {var ooun2 = getStorage('savedUsername');console.log("getStorage执行");if (ooun2 != null) {document.getElementById('account').value = ooun2;}}if (oops != null) {document.getElementById('password').value = oops;} else {var oops2 = getStorage('savedPsd');if (oops2 != null) {document.getElementById('password').value = oops2;}}};
完结。