<!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. .net core 2.1 Swagger 配置

    1.先创建 .net core Web 应用程序,选择API 2.安装 Nuget 包:Swashbuckle.AspNetCore Install-Package Swashbuckle.AspNe ...

  2. C# Xamarin 数据绑定入门基础

    目录 关于数据绑定 视图-视图绑定 绑定模式 简单的集合绑定 C# Xamarin 数据绑定入门基础 关于数据绑定 Xamarin 单向.双向绑定 Xaml绑定 C#代码绑定 在此之前,几段 伪代码 ...

  3. go-爬图片

    go语言爬取图片 注:动态加载出来的爬取不到,或怕取出来图片出错,代码中的网页是可以正常爬取的 package main import ( "fmt" "io" ...

  4. Add an Action that Displays a Pop-up Window 添加显示弹出窗口按钮

    In this lesson, you will learn how to create an Action that shows a pop-up window. This type of Acti ...

  5. 安装docker并部署web项目

    一.docker简介 1.docker定义:docker是一个用来装应用的容器,就像杯子可以装水,笔筒可以装笔,书包可以放书一样.你可以把“Hello World!”放到docker中,也可以把网站放 ...

  6. RMAN 'Duplicate From Active Database' Feature in Oracle11g (Doc ID 452868.1)

    RMAN 'Duplicate From Active Database' Feature in Oracle11g (Doc ID 452868.1) APPLIES TO: Oracle Data ...

  7. Octave中的矩阵操作

    >> a=[1 2;3 4;5 6];>> b=ones(2,3)b = 1 1 1 1 1 1 >> a*b 矩阵的乘法ans = 3 3 3 7 7 7 11 ...

  8. Python踩坑系列之使用redis报错：module 'redis' has no attribute 'Redis'问题

    初次使用redis时,在链接Redis后,运行报错“module 'redis' has no attribute 'Redis' ”. 具体代码如下: import redis r = redis. ...

  9. 在Windows系统中安装matplotlib，需要注意的问题

    matplotlib的下载地址:https://pypi.org/project/matplotlib/#files 以python3.6为例,适合的版本matplotlib-3.1.1-cp36-c ...

  10. centos6和centos7的防火墙基本命令

    一.centos6: 1.firewall的基本启动/停止/重启命令 $查看防火墙状态: service iptables status (/etc/init.d/iptables status) $ ...