当前位置: 首页 > news >正文

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;}}};

完结。

http://www.dtcms.com/a/284549.html

相关文章:

  • PyCharm 高效入门指南:从安装到进阶,解锁 Python 开发全流程
  • EXCEL VBA合并当前工作簿的所有工作表sheet
  • 切比雪夫不等式的理解以及推导【超详细笔记】
  • C语言---动态内存管理
  • 李宏毅《生成式人工智能导论》 | 第15讲-第18讲:生成的策略-影像有关的生成式AI
  • Google(谷歌)搜索引擎蜘蛛IP地址段
  • ubuntu--curl
  • 《Java Web 核心:Servlet、会话与过滤器笔记》
  • AndroidStudio环境搭建
  • vue svg实现一个环形进度条组件
  • 石子入水波纹效果:顶点扰动着色器实现
  • 【44】MFC入门到精通——MFC 通过Button按钮添加控件变量实现:按下 按钮变色 (比如开关 打开关闭状态) MFC更改button控颜色
  • Git简介与特点:从Linux到分布式版本控制的革命
  • 找不到或无法加载主类 org.gradle.wrapper.GradleWrapperMain
  • Linux Swap区深度解析:为何禁用?何时需要?
  • 【Java EE初阶 --- 网络原理】网络编程
  • Vue3 + WebSocket
  • 基于现代R语言【Tidyverse、Tidymodel】的机器学习方法
  • 3.2 函数参数与返回值
  • .vscode 扩展配置
  • 浅析网络安全面临的主要威胁类型及对应防护措施
  • 【C++指南】C++ list容器完全解读(四):反向迭代器的巧妙实现
  • 如何做好DNA-SIP?
  • 【41】MFC入门到精通——MFC中 GetLBText()、GetWindowText()、SetWindowText区别
  • 扭蛋机小程序开发:开启线上娱乐新风尚
  • 分布式光伏发电系统中的“四可”指的是什么?
  • 教资科三【信息技术】— 学科知识: 第一章(信息技术基础)
  • 基于springboot+vue+mysql技术的实验室管理系统(源码+论文)
  • 044_设计模式入门(创建型 / 结构型 / 行为型)
  • 【解决方案】鸿蒙 / 矿鸿系统 Shell 无故退出问题(息屏导致)详解