JS代码怎样实现记住账号密码

这次给大家带来js代码怎样实现记住账号密码,js代码实现记住账号密码的注意事项有哪些,下面就是实战案例,一起来看一下。

很多登录功能上都有个“记住密码”的功能,其实无非就是对cookie的读取。

引用添加Cookie

setCookie ( name, value, expdays )

获取Cookie

getCookie ( name )

删除Cookie

delCookie ( name )

代码说明

form表单

登录后复制

提交检查函数

点击submit按钮时,会调用此函数

function check (){    //获取表单输入:用户名,密码,是否保存密码    var username = document.getElementById("username").value.trim() ;    var password = document.getElementById("password").value.trim() ;    var isRmbPwd = document.getElementById("isRmbPwd").checked ;        //判断用户名,密码是否为空(全空格也算空)    if ( username.length != 0 && password.length != 0 )    {        //若复选框勾选,则添加Cookie,记录密码        if ( isRmbPwd == true )        {               setCookie ( "This is username", username, 7 ) ;            setCookie ( username, password, 7 ) ;        }        //否则清除Cookie        else        {            delCookie ( "This is username" ) ;            delCookie ( username ) ;        }        return true ;    }    //非法输入提示    else    {        alert('请输入必填字段!!!')        return false ;    }   }

登录后复制

文档初始化函数

文档加载完毕后,执行此函数

//将function函数赋值给onload对象window.onload = function (){    //从Cookie获取到用户名    var username = getCookie("This is username") ;    //如果用户名为空,则给表单元素赋空值    if ( username == "" )    {        document.getElementById("username").value="" ;        document.getElementById("password").value="" ;        document.getElementById("isRmbPwd").checked=false ;    }    //获取对应的密码,并把用户名,密码赋值给表单    else    {        var password = getCookie(username) ;            document.getElementById("username").value = username ;        document.getElementById("password").value = password ;        document.getElementById("isRmbPwd").checked = true ;    }}

登录后复制

键入用户名密码,未勾选复选框

提交,返回到表单页面

键入用户名密码,未勾选复选框

提交表单,返回

此时再去掉复选框勾选状态,提交

此时,浏览器就不再保存Cookie了

相信看了这些案例你已经掌握了方法,更多精彩请关注【创想鸟】其它相关文章!

相关阅读:

html的图片怎样使用base64编码来代替

marquee元素如何实现滚动字体与图片的效果

以上就是JS代码怎样实现记住账号密码的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2784939.html

(0)
上一篇 2025年3月8日 17:17:25
下一篇 2025年3月6日 06:09:00

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • js正则表达式如何应用

    本文主要和大家js中正则表达式的应用实例(包括面试题),希望能帮助到大家,能让大家正确使用js正则表达式。 1、找重复项最多的字符和个数 var str = 'sassdfdfffdasdffffffsdsdddsss'…

    编程技术 2025年3月8日
    000
  • js、jq如何验证银行卡账号代码分享

    本文主要和大家分享js、jq如何验证银行卡账号代码,本文主要通过代码来分享,希望能帮助到大家。 nbsp;html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3…

    编程技术 2025年3月8日
    200
  • SpringMvc+AngularJs应如何使用

    这次给大家带来springmvc+angularjs应如何使用,springmvc+angularjs使用的注意事项有哪些,下面就是实战案例,一起来看一下。 前端框架分段繁杂,框架本身也是日新月异,但是不免还是有很多好的框架,例如jQuer…

    2025年3月8日 编程技术
    200
  • js中的BOM如何正确操作

    一、什么是BOM? bom:browser object model 是浏览器对象模型,浏览器对象模型提供了独立与内容的、可以与浏览器窗口进行互动的对象结构,bom由多个对象构成,其中代表浏览器窗口的window对象是bom的顶层对象,其他…

    2025年3月8日
    200
  • 用Video.js实现H5直播界面

    这次给大家带来用video.js实现h5直播界面,用video.js实现h5直播界面的注意事项有哪些,下面就是实战案例,一起来看一下。 最近做了一个移动端H5简易版直播页,只有直播功能,后期再添加弹幕和礼物,要求是在微信中,虽然没有涉及到录…

    编程技术 2025年3月8日
    200
  • node.js的path模块详解

    这次给大家带来node.js的path模块详解,使用node.js的path模块的注意事项有哪些,下面就是实战案例,一起来看一下。 //引用该模块var path = require(“path”); 1、路径解析,…

    编程技术 2025年3月8日
    200
  • Node.js安装及环境配置的图文教程

    一、安装环境 1、本机系统:windows 10 pro(64位)2、node.js:v6.9.2lts(64位) 二、安装Node.js步骤 1、下载对应你系统的Node.js版本:https://nodejs.org/en/downlo…

    2025年3月8日 编程技术
    200
  • 一个用Vue.js 2.0+做出的石墨文档样式的富文本编辑器

    这次给大家带来一个用vue.js 2.0+做出的石墨文档样式的富文本编辑器,用vue.js 2.0+做石墨文档样式的富文本编辑器的注意事项有哪些,下面就是实战案例,一起来看一下。 之前一直使用的wangEditor 不能满足我司编辑和PM需…

    编程技术 2025年3月8日
    200
  • JS模块化-RequireJS

    今天给大家带来js模块化-requirejs,关于js模块化的注意事项有哪些,应该如何使用requirejs?下面就是实战案例,一起来看一下。 之前一直有听说RequireJS,但是一直都没机会去了解,只知道它是一个给js做模块化的API。…

    编程技术 2025年3月8日
    200
  • 怎样在Android开发中与js进行交互

    这次给大家带来怎样在android开发中与js进行交互,android开发中与js进行交互的注意事项有哪些,下面就是实战案例,一起来看一下。 我们在开发Android应用的时候,很多的时候需要跟网页打交道,假如我们现在在做一个外卖app,在…

    编程技术 2025年3月8日
    200

发表回复

登录后才能评论