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. 测量应用程序cass和cad的使用感受

    作为一名测绘工程专业的学生,在现在的电子信息时代是会经常与测量绘图有关的软件打交道的,如今我也算是接触绘图软件一年多了并且在上学期学校还组织我们大家一起进行了几周CAD集训,而且在校园和井陉的暑期实训 ...

  2. 使用阿里云公网ip建立bind，监听客户端连接失败

    bind: Cannot assign requested address 网上的众多答案不能解决我的问题 通过ping可以ping通,但是 使用bind代码,这个ip就是不能用的, 使用 ifcon ...

  3. Codeforces 455A - Boredom - [DP]

    题目链接:https://codeforces.com/problemset/problem/455/A 题意: 给出一个 $n$ 个数字的整数序列 $a[1 \sim n]$,每次你可以选择一个 $ ...

  4. Web开发——HTML DOM基础

    文档资料参考: 参考:HTML DOM 参考手册 参考:HTML DOM 教程 目录: 1.HTML DOM (文档对象模型) 2.查找 HTML 元素 2.1 通过 id 查找 HTML 元素 2. ...

  5. delphi with... do和自定义变量重名

    with类中的变量和外部变量如果重名,会将外部变量覆盖,这点需要注意!!!!!

  6. 检测到包降级: Microsoft.Extensions.Configuration.Abstractions 从 2.1.1 降 2.1.0

    解决方法:工具-nuget管理包-程序管理控制台-选择 项目- 执行 -Install-Package Microsoft.Extensions.Configuration.Abstractions ...

  7. 唯美MACD-完全版

    前言: 自己很喜欢MACD这个指标,因为很欠缺所以就搜集的多一点,有人问,学习缠为什么还这么搜集些Macd的资料呢?因为在分析走势(或盘整背驰.或趋势背驰)的时候我的习惯使用Macd做辅助判断,所以M ...

  8. 【UML】NO.51.EBook.5.UML.1.011-【UML 大战需求分析】- 时序图（Timing Diagram）

    1.0.0 Summary Tittle:[UML]NO.51.EBook.1.UML.1.011-[UML 大战需求分析]- 时序图(Timing Diagram) Style:DesignPatt ...

  9. 3.Python3变量与基本数据类型

    3.1保留字和标识符 3.1.1保留字 保留字是Python语言中已经被赋予特定意义的一些单词,开发程序时不可以把保留字作为变量.函数.类.模块和其他对象的名称来使用.保留字如下: 3.1.2标识符 ...

  10. The Designer (笛卡尔定理+韦达定理 || 圆的反演）

    Nowadays, little haha got a problem from his teacher.His teacher wants to design a big logo for the ...