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. Navicat导入sql server数据库

    1.新建连接 2. EXEC sp_attach_db @dbname = 'demo',   (数据库的名字) @filename1 = 'G:\C#\超市管理系统\DB\CSGL.mdf', @f ...

  2. easyui textbox 输入小写自动变大写,easyui textbox 绑定oninput事件 easyui textbox 绑定propertychange事件

    <input id="id" class="easyui-textbox" name="id" value="@Model. ...

  3. python2，python3同时安装时，python3可以安装并升级pip库，python2报错的解决办法

    最近在使用pip安装包的的时候出现下面错误 UnicodeEncodeError: 'ascii' codec can't encode character u'\u258f' 查询资料后发现原因是p ...

  4. 《Redis 优化》

    一:管道技术 - 由于 redis 和 客户端是使用 TCP 连接的,那么在使用中就会产生往返耗时. - 虽然可能单条影响并不大,但是如果执行较多的命令会对性能产生影响. - 使用管道原理和 keep ...

  5. Spring中bean标签的属性和值：

    Spring中bean标签的属性和值: <bean name="user" class="com.pojo.User" init-method=" ...

  6. Python：遍历一个目录下所有的文件及文件夹，然后计算每个文件的字符和line的小程序

    编写了一个遍历一个目录下所有的文件及文件夹,然后计算每个文件的字符和line的小程序,先把程序贴出来. #coding=utf-8 ''' Created on 2014年7月14日 @author: ...

  7. require 和 import 区别

    我很懵逼啊  都是在引用模块,那到底用哪个? 参考:https://www.cnblogs.com/hwldyz/p/9145959.html 看来会明白一点的 首先这两个都是为了JS模块化编程使用. ...

  8. Python学习之高级数组（一）

    1.Python基础学习之高级数组(一) 1.1视图:就是与较大数组共享相同数据的较小数组.Numpy包提供数据视图的概念是为了精确地控制内存的使用方式.  数组视图.切片视图.转置和重塑视图等 数组 ...

  9. 详解C# 网络编程系列：实现类似QQ的即时通信程序

    https://www.jb51.net/article/101289.htm 引言: 前面专题中介绍了UDP.TCP和P2P编程,并且通过一些小的示例来让大家更好的理解它们的工作原理以及怎样.Net ...

  10. PHP提交表单失败后如何保留填写的信息

    index.html模板文件大内容: <html> <head> <title>jQuery Ajax 实例演示</title> </head&g ...