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. Linux命令行下快捷键

    快捷键 说明 Ctrl+a 切换到命令行开始 Ctrl+e 切换到命令行末尾 Ctrl+c 终止当前命令或脚本 Ctrl+d ①退出当前shell,相当于exit②一个个删除光标后字符 Ctrl+l ...

  2. Oracle课程档案，第二天

    salary:工资 order by:排序 desc:降序 hire:雇佣 单行函数 一周有七天 一月不一定只有30天 trunc:截取 dual:空表 last:最后 month:月份 round: ...

  3. 常用C++面试总结

    指定对齐值:#pragma pack(n),n=1,2,4,8,16改变系统的对齐系数struct和union都是由多个不同的数据类型成员组成, 但在任何同一时刻, union中只存放了一个被选中的成 ...

  4. ios学习--iphone 实现下拉菜单

    原文地址:ios学习--iphone 实现下拉菜单作者:sdglyuan00 #import @interface DropDown1 : UIView <</span>UITabl ...

  5. call()的个人理解

    先看两道道面试题 面试题1: var number = 50; var obj = { number: 60, getNum: function() { var number = 70; return ...

  6. Codeforces 1138 - A/B/C/D/E - (Undone)

    链接:https://codeforces.com/contest/1137 A - Skyscrapers 题解:对于每一段 $1$ 和每一段 $2$,统计他们的长度.因此对于相邻的两段长度求较小值 ...

  7. weui开发笔记

    1.标准的weui只是一个css皮肤,当然里面有h5特性所以有一些很好的组件,比如时间选择控件.数字输入框(用于手机号等),在ios——微信中可以做到完美的展示. 2.ui框架以手机移动端为优先显示( ...

  8. 部署WEB项目到服务器（二）安装tomcat到linux服务器（Ubuntu）详解

    突发奇想,想在自己电脑上部署一个web网站. 1,先去tomcat官网下载一个适合linux的版本:tar.gz 2,然后通过FileZIlla传到服务器的/opt目录: 3,然后创建目录 并解压缩 ...

  9. 【LeetCode每天一题】Spiral Matrix II(螺旋数组II)

    Given a positive integer n, generate a square matrix filled with elements from 1 to n2 in spiral ord ...

  10. JavaBean-EL-JSTL-MVC

    JavaBean规范 类必须使用public修饰     必须保证有公共无参数构造器.  (一般就是可以通过反射轻松的创建对象)  包含了属性的操作(给属性赋值,获取属性值). JavaBean中的成 ...