JavaScript登录记住密码操作的简单代码分享-js教程-PHP中文网

首页

web前端

js教程

JavaScript登录记住密码操作的简单代码分享

黄舟

Mar 23, 2017 pm 02:32 PM

本文给大家分享一段简单的js代码实现用户登录记住密码操作，代码简单易懂，非常不错，具有参考借鉴价值，需要的朋友参考下吧

废话不多说了，直接给大家贴代码了，具体代码如下所示：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>记住密码</title>
</head>
<body>
<form id="loginForm">
  <input id="user" type="text" placeholder="用户名"><br>
  <input id="pswd" type="password" placeholder="密码"><br>
  <label><input id="remember" type="checkbox">记住密码</label><br>
  <input type=&#39;submit&#39; value="登录">
</form>
<script>
  window.onload = function(){
    var oForm = document.getElementById(&#39;loginForm&#39;);
    var oUser = document.getElementById(&#39;user&#39;);
    var oPswd = document.getElementById(&#39;pswd&#39;);
    var oRemember = document.getElementById(&#39;remember&#39;);
    //页面初始化时，如果帐号密码cookie存在则填充
    if(getCookie(&#39;user&#39;) && getCookie(&#39;pswd&#39;)){
      oUser.value = getCookie(&#39;user&#39;);
      oPswd.value = getCookie(&#39;pswd&#39;);
      oRemember.checked = true;
    }
    //复选框勾选状态发生改变时，如果未勾选则清除cookie
    oRemember.onchange = function(){
      if(!this.checked){
        delCookie(&#39;user&#39;);
        delCookie(&#39;pswd&#39;);
      }
    };
    //表单提交事件触发时，如果复选框是勾选状态则保存cookie
    oForm.onsubmit = function(){
      if(remember.checked){ 
        setCookie(&#39;user&#39;,oUser.value,7); //保存帐号到cookie，有效期7天
        setCookie(&#39;pswd&#39;,oPswd.value,7); //保存密码到cookie，有效期7天
      }
    };
  };
  //设置cookie
  function setCookie(name,value,day){
    var date = new Date();
    date.setDate(date.getDate() + day);
    document.cookie = name + &#39;=&#39; + value + &#39;;expires=&#39;+ date;
  };
  //获取cookie
  function getCookie(name){
    var reg = RegExp(name+&#39;=([^;]+)&#39;);
    var arr = document.cookie.match(reg);
    if(arr){
      return arr[1];
    }else{
      return &#39;&#39;;
    }
  };
  //删除cookie
  function delCookie(name){
    setCookie(name,null,-1);
  };
</script>
</body>
</html>

以上是JavaScript登录记住密码操作的简单代码分享的详细内容。更多信息请关注PHP中文网其他相关文章！

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

node.js流带打字稿Apr 30, 2025 am 08:22 AM

Node.js擅长于高效I/O，这在很大程度上要归功于流。流媒体汇总处理数据，避免内存过载 - 大型文件，网络任务和实时应用程序的理想。将流与打字稿的类型安全结合起来创建POWE

Python vs. JavaScript：性能和效率注意事项Apr 30, 2025 am 12:08 AM

Python和JavaScript在性能和效率方面的差异主要体现在：1)Python作为解释型语言，运行速度较慢，但开发效率高，适合快速原型开发；2)JavaScript在浏览器中受限于单线程，但在Node.js中可利用多线程和异步I/O提升性能，两者在实际项目中各有优势。

JavaScript的起源：探索其实施语言Apr 29, 2025 am 12:51 AM

JavaScript起源于1995年，由布兰登·艾克创造，实现语言为C语言。1.C语言为JavaScript提供了高性能和系统级编程能力。2.JavaScript的内存管理和性能优化依赖于C语言。3.C语言的跨平台特性帮助JavaScript在不同操作系统上高效运行。

幕后：什么语言能力JavaScript？Apr 28, 2025 am 12:01 AM

JavaScript在浏览器和Node.js环境中运行，依赖JavaScript引擎解析和执行代码。1）解析阶段生成抽象语法树（AST）；2）编译阶段将AST转换为字节码或机器码；3）执行阶段执行编译后的代码。

Python和JavaScript的未来：趋势和预测Apr 27, 2025 am 12:21 AM

Python和JavaScript的未来趋势包括：1.Python将巩固在科学计算和AI领域的地位，2.JavaScript将推动Web技术发展，3.跨平台开发将成为热门，4.性能优化将是重点。两者都将继续在各自领域扩展应用场景，并在性能上有更多突破。

Python vs. JavaScript：开发环境和工具Apr 26, 2025 am 12:09 AM

Python和JavaScript在开发环境上的选择都很重要。1)Python的开发环境包括PyCharm、JupyterNotebook和Anaconda，适合数据科学和快速原型开发。2)JavaScript的开发环境包括Node.js、VSCode和Webpack，适用于前端和后端开发。根据项目需求选择合适的工具可以提高开发效率和项目成功率。