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. 黑盒测试实践——day01

    一.任务进展情况 小组成员讨论了测试案例的选取以及测试工具的选取,目前正在设计合理的测试方法,研究待测试系统的功能需求和缺陷. 二.存在的问题 测试工具的使用还是不很清楚. 三.解决方法 通过上网搜集 ...

  2. .NET Core 的 Span<T> 学习与使用笔记

    一.阅读材料 All About Span: Exploring a New .NET Mainstay Span<T> - byte to int conversions Span< ...

  3. findStr

    目录 规则 目录结构 src/main.cpp src/findstr.cpp include/findstr.h ft/TestCase.cpp ft/makefile ftbuild.sh mai ...

  4. 目标检测（四）Faster R-CNN: Towards Real-Time Object Detection with Region Proposal Networks

    作者:Shaoqing Ren, Kaiming He, Ross Girshick, and Jian Sun SPPnet.Fast R-CNN等目标检测算法已经大幅降低了目标检测网络的运行时间. ...

  5. SpringMVC(四)：什么是HandlerAdapter

    一.什么是HandlerAdapter Note that a handler can be of type Object. This is to enable handlers from other ...

  6. eclipse出现An internal error occurred during: "Building workspace". Java heap space 错误

    出现这个错误,eclipse 会卡死,以及自动退出 解决方案 工程根目录 找到项目中.project文件 删除这两处 第一处: <buildCommand> <name>org ...

  7. Cocos Creator - 入门教程项目 - 博客频道 - CSDN.NET

    3457 教程司令部 [20160418] | Cocos Creator - CocoaChina CocoaChina_让移动开发更简单cocoachina.com 2033 Cocos Crea ...

  8. 使用 Asp.net core 2.0 + Angular 4 构建车辆管理的Web应用程序

    https://www.codeproject.com/Articles/1210559/Asp-net-core-Angular-Build-from-scratch-a-web

  9. Python学习之数组类型一：

    Python学习之数组类型一: Numpy中的向量与矩阵: 1.创建:  向量.矩阵均由array函数创建,区别在于向量是v=array( [逗号分隔的元素] ), 矩阵是M=array( [[ ]] ...

  10. PSPnet模型结构的实现代码

    1 import torch import torch.nn.functional as F from torch import nn from torchvision import models f ...