<!DOCTYPE html>

 <html>

 <head>

     <title></title>

 </head>

 <style type="text/css">

     .mar{

         position: absolute;

         left: 400px;

         top:100px;

     }

     button{

         margin-left: 40%;

         margin-top: 5%;

     }

     .rember{

         margin-left: 3em;

     }

 </style>

 <body>

 <div class="mar">

     <div>

         <label>账号：</label>

         <input type="text" id="user" name="">

     </div>

     <div>

         <label>密码：</label>

         <input type="password" id="password" name="">

     </div>

     <div class="rember">

         <input type="checkbox" name="" id="checkbox">

         <label for="checkbox">记住密码</label>

     </div>

     <button onclick="reload()">刷新</button>

     <br>

     <strong style="color: #ff0000;">点击刷新查看是否记住</strong>

 </div>

 <script type="text/javascript">

     // 记住密码

     var user = document.getElementById('user'),

     pass = document.getElementById('password'),

     checkOk = document.getElementById('checkbox'),

     localUser = localStorage.getItem('user') || '',//获取user的值并保存

     localPass = localStorage.getItem('pass') || '';//获取password的值并保存

     user.value = localUser;

     pass.value = localPass;

     if(localUser !== '' && localPass !== ''){

         checkOk.setAttribute('checked','');

     }

     // checkbox选中触发

     checkOk.addEventListener('click', () => {

         if(checkOk.checked){

             localStorage.setItem('user',user.value);

             localStorage.setItem('pass',pass.value);

         }else{

             localStorage.setItem('user','');

             localStorage.setItem('pass','');

         }

     })

     //刷新

     function reload(){

         window.location.reload();

     }

 </script>

 </body>

 </html>

h5本地存储登录页面实现记住密码功能的更多相关文章

  1. vue项目实现记住密码功能

     一.谷歌浏览的残留问题 现在很多的网站都有一个需求是记住密码这个功能,为的是避免用户下次登录的时候繁琐的输入过程. 像是一些主流的浏览器(比如Chrome)都有了这个功能,而且如果你登录了Chrom ...

  2. 【原创】js中利用cookie实现记住密码功能

    在登录界面添加记住密码功能,我首先想到的是在java后台中调用cookie存放账号密码,大致如下: HttpServletRequest request HttpServletResponse res ...

  3. js中利用cookie实现记住密码功能

    在登录界面添加记住密码功能,代码如下: //设置cookie var passKey = '4c05c54d952b11e691d76c0b843ea7f9'; function setCookie( ...

  4. 基于localStorge开发登录模块的记住密码与自动登录

    前沿||我是乐于分享,善于交流的鸟窝 先做写一篇关于登录模块中记住密码与自动登录的模块.鸟窝微信:jkxx123321 关于这个模块功能模块的由来,这是鸟大大的处女秀,为什么这么说呢?一天在群里,一个 ...

  5. H5本地存储详细使用教程（localStorage + JSON数据存储应用框架）

    一.Web Storage教程 1.概述: 对于Web Storage来说,实际上是Cookies存储的进化版.如果了解Cookie的人几乎一看Web Storage就会用,如果你从来没用过没了解过C ...

  6. h5 本地存储

    H5本地存储有两个API,一个是Web Storage,还有一个是Web SQL.不管是哪一个,都是基于JavaScript语言来使用,接下来我就教你怎么使用H5本地存储,本文篇幅较大,JS代码较多, ...

  7. H5本地存储（转）

    H5本地存储  一.本地存储由来的背景         众所周知Html4时代Cookie的大小.格式.存储数据格式等限制,网站应用如果想在浏览器端存储用户的部分信息,那么只能借助于Cookie.但是 ...

  8. H5本地存储详解

    H5之前存储数据一般是通过 cookie ,但是 cookie 存的数据容量比较少.H5 中扩充了文件存储能力,可存储多达 5MB 的数据.现在就实际开发经验来对本地存储 ( Storage ) 的使 ...

  9. 利用H5本地存储localStorage、sessionStorage

    最近的业务处理上,要使用cookie缓存储一下数据,公司的cookie还搞出点问题.而用户的浏览器都是利用微信的内置,普遍支持h5的本地存储.于是利用了这个... 现代浏览器普遍开始支持H5本地存储, ...

随机推荐

  1. CPU异常分析(以trap00为例)

    Windows内核分析索引目录:https://www.cnblogs.com/onetrainee/p/11675224.html CPU异常的记录(trap00为例) 一.CPU检测到除零异常的执 ...

  2. java基础(4):引用数据类型、流程控制语句

    1. 引用数据类型 1.1 Scanner类 我们要学的Scanner类是属于引用数据类型,我们先了解下引用数据类型. 引用数据类型的使用: 与定义基本数据类型变量不同,引用数据类型的变量定义及赋值有 ...

  3. 阅读SQL基础教程

    这两天阅读SQL基础教程,目标是把SQL语法吃透,会写一些笔记.

  4. Cobalt Strike系列教程第四章：文件/进程管理与键盘记录

    Cobalt Strike系列教程分享如约而至,新关注的小伙伴可以先回顾一下前面的内容: Cobalt Strike系列教程第一章:简介与安装 Cobalt Strike系列教程第二章:Beacon详 ...

  5. iOS引导页（镂空效果）

    推荐使用SDK:pod 'EAFeatureGuideView' 温馨提示:(引导的图片图标需要私人订制的可以用自己的,让UI提供) 参考链接:https://www.jianshu.com/p/c9 ...

  6. Windows下Linux虚拟机的配置以及Win10 linux子系统开启

    本文所用资料下载地址为: 链接:链接:https://pan.baidu.com/s/1iiI2ebAnomKrBpvSg05w2A 提取码:7giz 复制这段内容后打开百度网盘手机App,操作更方便 ...

  7. Java反射03 : 获取Class的注解、修饰符、父类、接口、字段、构造器和方法

    java.lang.Class类提供了获取类的各种信息对象的静态方法. 本文转载自:https://blog.csdn.net/hanchao5272/article/details/79363921 ...

  8. springboot架构下运用shiro后在configuration,通过@Value获取不到值，总是为null

    通过网上查找资料,是因为shiro的bean @Beanpublic LifecycleBeanPostProcessor lifecycleBeanPostProcessor() { return ...

  9. JUnit与MSTest

    执行test类的每个方法时,需要做一些初始化.比如初始化applicationcontext.JUnit使用@Before注解. import org.junit.Before; import org ...

  10. WPF窗口传递 委托事件

    1.子窗口定义委托事件 public delegate void Btn_Click(int i); public event Btn_Click BtnEvent; 在子窗口使用 BtnEvent( ...