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.pswp.cn/diannao/91533.shtml
繁体地址,请注明出处:http://hk.pswp.cn/diannao/91533.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【Java】文件编辑器

代码&#xff1a;&#xff08;SimpleEditor.java&#xff09;import java.awt.Color; import java.awt.Font; import java.awt.Insets; import java.awt.BorderLayout;import java.awt.event.ActionEvent; import java.awt.event.ActionListener;import java.io.BufferedReader…

PyTorch中torch.topk()详解:快速获取最大值索引

torch.topk(similarities, k=2).indices 是什么意思 torch.topk(similarities, k=2).indices 是 PyTorch 中用于获取张量中最大值元素及其索引的函数。在你的代码中,它的作用是从 similarities 向量里找出得分最高的2个元素的位置索引。 1. 核心功能:找出张量中最大的k个值…

快速搭建本地HTTP服务器:`python -m http.server`详解

文章目录 一、什么是 http.server? 二、基础使用 1. 启动服务器 2. 指定端口 3. 绑定特定IP 三、实际应用场景 1. 本地前端开发 2. 文件共享 3. 启用CGI脚本(高级) 四、目录浏览详解* 五、安全注意事项 六、进阶技巧 1. 后台运行(Linux/macOS) 2. 自定义错误页面 3. 结合其…

运维技术教程之Jenkins上的known_hosts文件

在Jenkins中&#xff0c;known_hosts文件用于存储已验证的远程节点主机密钥&#xff0c;避免每次连接时重复验证。以下是基于不同场景的解决方案&#xff1a;1. 创建并配置 known_hosts 文件 若Jenkins提示 No Known Hosts file 或找不到文件&#xff0c;需手动创建并配置&…

leetcode 3201. 找出有效子序列的最大长度 I 中等

给你一个整数数组 nums。nums 的子序列 sub 的长度为 x &#xff0c;如果其满足以下条件&#xff0c;则称其为 有效子序列&#xff1a;(sub[0] sub[1]) % 2 (sub[1] sub[2]) % 2 ... (sub[x - 2] sub[x - 1]) % 2返回 nums 的 最长的有效子序列 的长度。一个 子序列 指的…

Java并发编程第三篇(深入解析Synchronized)

1. Synchronized简介&#xff1a;一个常见的并发“陷阱” 在正式开始学习新知识前&#xff0c;我们不妨先来看一个现象&#xff0c;这是一个很多并发编程新手都会遇到的“陷阱”&#xff1a; public class SynchronizedDemo implements Runnable {// 共享变量private static in…

Chatbox AI|多模型多模态交互+MCP,一个工具打造你的全能私人助手

ChatBoxAI集成GPT-4、Claude等顶尖模型&#xff0c;支持Windows/macOS/Linux多平台&#xff0c;具备隐私加密、文件智能解析&#xff08;PDF/代码/图片&#xff09;及开发者友好特性。其应用覆盖自媒体创作、代码实时预览、AI绘图&#xff08;封面/表情包&#xff09;及联网搜索…

在Autodl服务器中使用VNC建立图形界面

在Autodl服务器中使用VNC建立图形界面**AutoDL 3D 图形桌面搭建教程****第一步&#xff1a;安装桌面和 VNC****第二步&#xff1a;进行一次性配置****第三步&#xff1a;日常启动与使用**AutoDL 3D 图形桌面搭建教程 目标: 在你的 AutoDL 环境上&#xff0c;以最少的步骤搭建一…

CD54.【C++ Dev】vector和list的反向迭代器的实现

目录 1.反向迭代器的功能 2.算法 方法1:新写一个类用于反向迭代器 方法2:封装正向迭代器实现反向迭代器 解析operator* 正向迭代器和反向迭代器的关系 返回 *--tmp的原因 3.为自制的vector和list编写反向迭代器 编写统一的反向迭代器 修改vector头文件 修改list头文…

如何解决pip安装报错ModuleNotFoundError: No module named ‘django’问题

【Python系列Bug修复PyCharm控制台pip install报错】如何解决pip安装报错ModuleNotFoundError: No module named ‘django’问题 摘要 在日常 Django 项目开发中&#xff0c;最常见的“拦路虎”之一就是 ModuleNotFoundError: No module named django。该异常通常在以下场景出…

单页面和多页面的区别和优缺点

单页面应用&#xff08;SPA&#xff09;与多页面应用&#xff08;MPA&#xff09;的区别单页面应用&#xff08;SPA&#xff09;整个应用只有一个HTML文件&#xff0c;内容通过JavaScript动态加载和渲染。页面切换时无需重新加载整个页面&#xff0c;仅更新部分DOM。依赖前端框…

暑期自学嵌入式——Day05(C语言阶段)

接续上文&#xff1a;暑期自学嵌入式——Day04&#xff08;C语言阶段&#xff09;-CSDN博客 点关注不迷路哟。你的点赞、收藏&#xff0c;一键三连&#xff0c;是我持续更新的动力哟&#xff01;&#xff01;&#xff01; 主页&#xff1a; 一位搞嵌入式的 genius-CSDN博客 …

通用人工智能AGI遥遥无期,面临幻灭

通用人工智能AGI有可能2080年前也实现不了 首先说一下&#xff0c;目前的人工智能方向是错的&#xff0c;通用人工智能不值得追捧。 真的特别无奈&#xff0c;现在还有很多人在吹AI&#xff0c;说什么2027年就能实现AGI&#xff0c;如果你指的是真正的强人工智能AGI&#xff0c…

智能体开发工具链全景图:IDE、调试器与监控平台

智能体开发工具链全景图&#xff1a;IDE、调试器与监控平台 &#x1f31f; 嗨&#xff0c;我是IRpickstars&#xff01; &#x1f30c; 总有一行代码&#xff0c;能点亮万千星辰。 &#x1f50d; 在技术的宇宙中&#xff0c;我愿做永不停歇的探索者。 ✨ 用代码丈量世界&…

三十四、【扩展工具篇】JSON 格式化与解析:集成 Monaco Editor 打造在线 JSON 工具

三十四、【扩展工具篇】JSON 格式化与解析:集成 Monaco Editor 打造在线 JSON 工具 前言 功能概览 技术选型 实现步骤 第一步:添加路由和侧边栏菜单入口 第二步:创建 JSON 工具页面 第三部分:全面测试与验证 总结 前言 在日常的接口开发和测试中,我们经常需要处理 JSON 数…

MySQL高可用集群架构:主从复制、MGR与读写分离实战

1. MySQL高可用架构概述 MySQL高可用性(High Availability)解决方案旨在确保数据库服务在硬件故障、网络问题等异常情况下仍能持续提供服务。以下是主流的高可用方案对比: 方案 原理 优点 缺点 适用场景 主从复制 基于binlog的异步复制 简单易用,对性能影响小 数据一致性弱,…

JxBrowser 7.43.5 版本发布啦!

在此版本中&#xff0c;我们进行了错误修复和稳定性改进。 &#x1f517; 点击此处了解更多详情。 &#x1f193; 获取 30 天免费试用。

借助AI学习开源代码git0.7之编译和使用

如何学习优秀的开源代码&#xff1f;目前大部分的优秀开源代码&#xff0c;代码量都已经非常庞大&#xff0c;比如git。以git为例&#xff0c;git最新版本代码有279814行&#xff0c; 而git0.7版本已经大部分实现了现在git版本的基本功能&#xff0c;而代码量却只有4950行&…

ObservableCollection全面解析

本文仅作为参考大佬们文章的总结。 ObservableCollection是C#中一个功能强大的动态数据集合类&#xff0c;特别适用于需要数据绑定和UI自动更新的场景。本文将系统性地总结ObservableCollection的核心概念、使用方法、性能优化策略以及在实际项目中的应用实践。 一、Observab…

佰力博检测与您探讨超高温介电测试的应用领域

超高温介电测试是指在极端高温条件下&#xff08;通常高于1000℃&#xff09;对材料的介电性能进行测量和分析的过程。以评估材料在高温环境下的电学性能稳定性&#xff0c;如介电常数、介电损耗、阻抗谱等参数。超高温介电测试需要用到的超高温介电阻抗测试设备&#xff1a;UT…