<!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. 深入理解 Java 数组

  2. PlayJava Day019

    今日所学: /* 2019.08.19开始学习,此为补档. */ 1.this: ①this是成员方法的一个特殊的固有的本地变量,它表达了调用这个方法的那个对象. ②在成员方法内部直接调用自己(thi ...

  3. Implement Custom Business Classes and Reference Properties实现自定义业务类和引用属性（EF）

    In this lesson, you will learn how to implement business classes from scratch. For this purpose, the ...

  4. Linux 资源监控整体分析-TOP

    一.top 第一行,任务队列信息,同 uptime 命令的执行结果 系统时间:15:23:10 运行时间:up 236 day,4min, 当前登录用户:  2个 user 负载均衡(uptime)  ...

  5. grant localhost and % for mysql

  6. 20个常用的JavaScript字符串方法

    摘要: 玩转JS字符串. 原文:JS 前20个常用字符串方法及使用方式 译者:前端小智 Fundebug经授权转载,版权归原作者所有. 本文主要介绍一些最常用的JS字符串函数. 1. charAt(x ...

  7. CodeForces-1217D （拓扑排序/dfs 判环）

    题意 https://vjudge.net/problem/CodeForces-1217D 请给一个有向图着色,使得没有一个环只有一个颜色,您需要最小化使用颜色的数量. 思路 因为是有向图,每个环两 ...

  8. 记录python上传文件的坑（1）

    import random import string import requests from requests_toolbelt import MultipartEncoder f = '2019 ...

  9. 9. Vue - vue-cli

    一.前端开发工具 1. Node.js ​ Node.js是一个基于Chrome v8引擎的JavaScript运行环境.JavaScript本来只能跑在浏览器上,然后Node.js就是一种能让js直 ...

  10. vivado2017.1和modelsim10.5联合仿真

    vivado2017.1和modelsim版本 vivado可在xilinx官网查询匹配的modelsim最低版本,下载modelsim前记得选用合适的版本号,如图 查询地址:https://www. ...