<!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. echarts 柱状图+折线+文字倾斜及省略

    效果图: 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  2. 【React Native】进阶指南之一（特定平台、图片加载、动画使用）

    一.特定平台代码 React Native提供了两种方法来区分平台: 使用Platform模块: 使用特定平台扩展名: 1.Platform模块 React Native提供了一个检测当前运行平台的模 ...

  3. Windows 7下Node.js Web开发环境搭建笔记

    Node.js是什么? 我们看看百科里怎么说的?JavaScript是一种运行在浏览器的脚本,它简单,轻巧,易于编辑,这种脚本通常用于浏览器的前端编程,但是一位开发者Ryan有一天发现这种前端式的脚本 ...

  4. Linux查看文件系统的挂载时间浅析

    我们在Linux系统中如何找到文件系统的挂载时间呢,下面实验测试环境为RHEL 6.6,其它Linux版本没有验证测试.这个简单测试了一下常用的ext3/4.xfs.nfs文件系统. ext文件系统 ...

  5. CSS .css边框属性（border）

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. centos图形化桌面安装过程

    连接 1.安装xwindow yum -y groupinstall "X Window System" \\安装 X Window System 环境 2.安装gnome des ...

  7. Linux CentOS 6.5 卸载、tar安装MySQL

    卸载系统自带MySQL 1. 查看系统当前是否安装有MySQL rpm -qa|grep -i mysql 2. 卸载当前版本的MySQL yum remove mysql mysql-server ...

  8. （day57）九、多对多创建的三种方式、Forms组件

    目录 一.多对多三种创建方式 (一)全自动 (二)纯手撸(基本不用) (三)半自动(推荐使用) 二.forms组件 (一)校验数据 (1)常用内置字段及参数 (2)内置的校验器 (3)HOOK方法 ( ...

  9. Go 循环 (for)

    循环类型 for: for a := 0; a < 10; a ++{ fmt.Println(a) } 在执行结束后 a == 10 while: a := 0 for a < 10{ ...

  10. 【转】SQL中GROUP BY语句与HAVING语句的使用

    一.GROUP BY GROUP BY语句用来与聚合函数(aggregate functions such as COUNT, SUM, AVG, MIN, or MAX.)联合使用来得到一个或多个列 ...