HTML5 提供了两种在客户端存储数据的新方法：

  • localStorage - 没有时间限制的数据存储
  • sessionStorage - 针对一个 session 的数据存储

之前，这些都是由 cookie 完成的。但是 cookie 不适合大量数据的存储，因为它们由每个对服务器的请求来传递，这使得 cookie 速度很慢而且效率也不高。

在 HTML5 中，数据不是由每个服务器请求传递的，而是只有在请求时使用数据。它使在不影响网站性能的情况下存储大量数据成为可能。

对于不同的网站，数据存储于不同的区域，并且一个网站只能访问其自身的数据。

HTML5 使用 JavaScript 来存储和访问数据。

localStorage 方法存储的数据没有时间限制。第二天、第二周或下一年之后，数据依然可用。

 <!DOCTYPE html>

 <html>

 <head>

     <title></title>

     <meta charset="utf-8">

     <script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>

 </head>

 <style type="text/css">

     form{

         width: 300px;

         padding: 10px 0px 20px 30px;

         height:auto;

         border-radius: 6px;

         border-left:8px solid #19a049;

         background:#eee;

         margin:100px auto;

     }

     #user,#pass{

         padding: 8px;

         outline: none;

         background: transparent;

         border:1px solid #999;

         margin-top: 5px;

     }

     #sub{

         padding: 6px;

         outline: none;

         border:none;

         background: #19a049;

         color:#fff;

         width: 150px;

         border-radius: 6px;

         cursor: pointer;

     }

 </style>

 <body>

     <form action="" method="" onsubmit="return loginBtn_click();">

         <h3>Log in</h3>

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

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

         <input type="checkbox" id="remember" checked><br/><br/>

         <input type="submit" id="sub">

     </form>

 </body>

 <script type="text/javascript">

     $(document).ready(function(){

         var strName = localStorage.getItem('keyName');

         var strPass = localStorage.getItem('keyPass');

         if(strName){

             $('#user').val(strName);

         }if(strPass){

             $('#pass').val(strPass);

         }

     });

     function loginBtn_click(){

             var strName = $('#user').val();

             var strPass = $('#pass').val();

             localStorage.setItem('keyName',strName);

             if($('#remember').is(':checked')){

                 localStorage.setItem('keyPass',strPass);

             }else{

                 localStorage.removeItem('keyPass');

             }

         }

 </script>

 </html>

超简单的localStorage实现记住密码的功能的更多相关文章

  1. HTML5的LocalStorage实现记住密码

    HTML5 提供了两种在客户端存储数据的新方法: localStorage - 没有时间限制的数据存储 sessionStorage - 针对一个 session 的数据存储 localStorage ...

  2. MiniTwitter记住密码等功能实现

    一.SharedPreferences的用法:(相关实现功能的只是了解) 由于SharedPreferences是一个接口,而且在这个接口里没有提供写入数据和读取数据的能力.但它是通过其Editor接 ...

  3. （四）SpringMVC之使用cookie实现记住密码的功能

    注意:因为实现记住密码的功能需要用到json,所以需要加上这条语句: <script type="text/javascript" src="scripts/jqu ...

  4. Cookie实现记住密码的功能

    一.什么是Cookie cookie是一种WEB服务器通过浏览器在访问者的硬盘上存储信息的手段.Cookie的目的就是为用户带来方便,为网站带来增值.虽然有着许多误传,事实上Cookie并不会造成严重 ...

  5. JavaWeb学习----Cookie实现记住密码的功能

    [声明] 欢迎转载,但请保留文章原始出处→_→ 生命壹号:http://www.cnblogs.com/smyhvae/ 文章来源:http://www.cnblogs.com/smyhvae/p/4 ...

  6. 通过js来设置cookie和读取cookie，实现登陆时记住密码的功能

    function setCookie(){ //设置cookie var loginCode = $("#login_code").val(); //获取用户名信息 var pwd ...

  7. 登陆一个系统时，前端js实现的验证，记住密码等功能

    记住密码部分: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <m ...

  8. 014. asp.net实现记住密码的功能

    protected void Button1_Click(object sender, EventArgs e) { if (txtname.Text.Trim().Equals("mr&q ...

  9. android: SharedPreferences实现记住密码功能

    既然是实现记住密码的功能,那么我们就不需要从头去写了,因为在上一章中的最佳实 践部分已经编写过一个登录界面了,有可以重用的代码为什么不用呢?那就首先打开 BroadcastBestPractice 项 ...

随机推荐

  1. jquery 全选/取消全部

    html /*主要按钮*/ <td><input type="checkbox" id="checkAllChange" /></ ...

  2. linux考试题改错

    符号链接和硬链接有什么区别? 改:符号链接存储文件路径,可以指向不同分区文件,源文件删除后失效. 改:硬链接指向文件索引节点,仅能指向同一分区文件,源文件删除后可以访问. 请描述文件和目录9位权限位的 ...

  3. RMQPOJ3264

    Balanced Lineup POJ-3264 DP分析 设A[i]是要求区间最值的数列,F[i, j]表示从第i个数起连续2^j个数中的最大值.(DP的状态) 初状态是F[i,0]=A[i] 状态 ...

  4. (在命名空间 public 中)存在冲突

    解决方案: http://www.wastedpotential.com/flash-as3-stop-using-automatically-declare-stage-instances/ 修复错 ...

  5. vue:不同环境配置不同打包命令

    修改prod.env.js 'use strict'const target = process.env.npm_lifecycle_event;if (target == 'build') { // ...

  6. 智能门锁测试程序和PCB板线路通断检测程序经验总结

    这次去WZ出差,还是很累的,之前一年多没有搞嵌入式了,更重要的是之前没有接触太深刻GPIO的用法等等原因,导致很心累. 必须掌握的技能: (1)SPI和IIC总线,模拟和专用外设两种方式,他们的重要性 ...

  7. 5.0-uC/OS-III时间管理

    1.时间管理 uC/OS-III为用户提供了与时间管理相关的服务. 在uC/OS-III中设置了能提供时基中断的中断源.该中断源提供 10Hz 到 1000Hz 之间的中断(需设置OS_CFG_APP ...

  8. Java 基础 IO流(转换流，缓冲)

    一,前言 在学习字符流(FileReader.FileWriter)的时候,其中说如果需要指定编码和缓冲区大小时,可以在字节流的基础上,构造一个InputStreamReader或者OutputStr ...

  9. osx brew mysql

    MariaDB Server is available for installation on macOS (formerly Mac OS X) via the Homebrew package m ...

  10. SQL Server 之 事务与隔离级别实例讲解

    SQL Server 之 事务与隔离级别实例讲解 SQL Server 实现了6个隔离级别来防止并发情况下,类似企图并发的访问或修改同一数据时问题的发生.本文将带你体验全部6个隔离级别.正如你接下来将 ...