<!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. Jupyter Notebook 使用小记

    简介 Jupyter Notebook 是一款几乎综合所有编程语言,能够把软件代码.计算输出.解释文档.多媒体资源整合在一起的多功能科学计算平台.具有如下优点: 整合所有资源 交互性编程体验 零成本重 ...

  2. Linux平台 Oracle 19c RAC安装Part3：DB配置

    Linux平台 Oracle 19c RAC安装Part3:DB配置 四.DB(Database)配置 4.1 解压DB的安装包 4.2 DB软件配置 4.3 ASMCA创建磁盘组 4.4 DBCA建 ...

  3. GO基础之Map

    go开发手册:   https://studygolang.com/pkgdoc 一.什么是map 有资料翻译成地图.映射或字典.但是大多数习惯上翻译成集合.1.map是Go中的内置类型,它将一个值与 ...

  4. echarts 柱状图

    效果: 图一:Y轴显示百分比  柱状图定点显示数量个数 图二:x轴  相同日期对应的每个柱子显示不同类型的数量 代码: 容器: <div id="badQuaAnalyze" ...

  5. Android Studio 3.0 及以上版本使用技巧总结

    1.更新Android Studio后下载Gradle文件的技巧 更新到3.0版本后,可能会出现创建新项目一直停留在如下图的界面: 选择等待?不知道要等到什么时候,这时候怎么办呢?显然,不能一直等待下 ...

  6. TypeScript 学习笔记（四）

    函数: 1.函数是一组一起执行一个任务的语句 2.我们可以把一段可复用的代码放到一起组成函数,从而提高效率 3.函数声明(通过关键字 function 来声明)告诉编译器函数的名称.返回类型和参数 4 ...

  7. Django_xadmin_TypeError: Related Field got invalid lookup: icontains

    问题: 当我在给某一张表加上外键搜索的时候,会出现 TypeError: Related Field got invalid lookup: icontains 问题原因: a 表关联 b表,也就是说 ...

  8. layui 获取radio单选框选中的值

    Layui 获取 radio的值,layui判断radio选中的单选值 layui form 表单获取radio选中的值 首先准备两个radio <input type="radio& ...

  9. ACM 基本输入

    单次输入 C语言 int a,b; scanf("%d %d",&a,&b); C++语言 int a,b; cin >> a >> b; ...

  10. python配置yaml

    我们在做自动化的过程中无论是接口自动化还是UI自动化都会存在很多数据,我们对于自动化中如何存放这些数据也是很重要一点,如果写在代码里的话,每次更换数据就有点繁琐,我们可以通过一个文件存放这些数据,然后 ...