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

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

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

web storage和cookie的区别

Web Storage的概念和cookie相似，区别是它是为了更大容量存储设计的。Cookie的大小是受限的，并且每次你请求一个新的页面的时候Cookie都会被发送过去，这样无形中浪费了带宽，另外cookie还需要指定作用域，不可以跨域调用。
除此之外，Web Storage拥有setItem,getItem,removeItem,clear等方法，不像cookie需要前端开发者自己封装setCookie，getCookie。
但是Cookie也是不可以或缺的：Cookie的作用是与服务器进行交互，作为HTTP规范的一部分而存在 ，而Web Storage仅仅是为了在本地“存储”数据而生

一、判断浏览器是否支持localStorage可以使用下面的代码：

  1. if(window.localStorage){
  2.  alert("浏览支持localStorage")
  3. }
  4. else
  5. {
  6.  alert("浏览暂不支持localStorage")
  7. }
  8. //或者 if(typeof window.localStorage == 'undefined'){ alert("浏览暂不支持localStorage") }

　　

二、代码demo

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>localStorage</title>
  6. <script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
  7. </head>
  8. <body>
  9. 	<form action="" method="post" onsubmit="return loginBtn_click();">
  10.         <h3>Log in</h3>
  11.         <input type="text" name="user" placeholder="user" id="user">
  12.         <input type="password" name="pass" placeholder="password" id="pass">
  13.         <input type="checkbox" id="remember" checked><br/><br/>
  14.         <input type="submit" id="sub">
  15.     </form>
  16. </body>
  17. <script type="text/javascript">
  18.     $(document).ready(function(){
  19.  
  20.         var strName = localStorage.getItem('keyName');
  21.         var strPass = localStorage.getItem('keyPass');
  22.         if(strName){
  23.             $('#user').val(strName);
  24.         }if(strPass){
  25.             $('#pass').val(strPass);
  26.         }
  27.  
  28.     });
  29.  
  30.     function loginBtn_click(){
  31.             var strName = $('#user').val();
  32.             var strPass = $('#pass').val();
  33.             localStorage.setItem('keyName',strName);
  34.             if($('#remember').is(':checked')){
  35.                 localStorage.setItem('keyPass',strPass);
  36.                 alert("记住密码");
  37.             }else{
  38.                 localStorage.removeItem('keyPass');
  39.                 alert("部记住密码");
  40.             }
  41.             window.location.reload();
  42.         }
  43. </script>
  44. </html>

三.localStorage的基本用法：

  1. setItem存储value
  2. 用途：将value存储到key字段
  3. 用法：.setItem( key, value)
  4. 代码示例：
  5. localStorage.setItem("site", "js8.in");
  6.  
  7. getItem获取value
  8. 用途：获取指定key本地存储的值
  9. 用法：.getItem(key)
  10. 代码示例：
  11. var site = localStorage.getItem("site");
  12.  
  13. removeItem删除key
  14. 用途：删除指定key本地存储的值
  15. 用法：.removeItem(key)
  16. 代码示例：
  17. localStorage.removeItem("site");
  18.  
  19. clear清除所有的key/value
  20. 用途：清除所有的key/value
  21. 用法：.clear()
  22. 代码示例：
  23. localStorage.clear();

原文地址：

超简单的localStorage实现记住密码的功能

其他资料：

HTMl5的存储方式sessionStorage和localStorage详解

javascript记住用户名和登录密码（两种方式）cookie

HTML5的LocalStorage实现记住密码的更多相关文章

  1. 超简单的localStorage实现记住密码的功能

    HTML5 提供了两种在客户端存储数据的新方法: localStorage - 没有时间限制的数据存储 sessionStorage - 针对一个 session 的数据存储 之前,这些都是由 coo ...

  2. localStorage保存账号密码

    首先是判断浏览器是否支持这一属性,他是HTML5里的属性: if(window.localStorage){ alert('支持');}else{ alert('不支持');} localStorag ...

  3. local storage 简单应用‘’记住密码’

    前些时候一直用cookie等来进行登录页面记住面膜操作,但是由于其存储容量小等缘故,所以后来转向local storage,原理为:当用户勾选记住密码时,local storage 存储用户名密码同时 ...

  4. jquery 记住账号 记住密码

    <body> <label><input type="checkbox" onclick="loginBtn_user()" /& ...

  5. vue中使用cookies和crypto-js实现记住密码和加密

    前端加密 使用crypto-js加解密 第一步,安装 npm install crypto-js 第二步,在你需要的vue组件内import import CryptoJS from "cr ...

  6. 基于localStorge开发登录模块的记住密码与自动登录

    前沿||我是乐于分享,善于交流的鸟窝 先做写一篇关于登录模块中记住密码与自动登录的模块.鸟窝微信:jkxx123321 关于这个模块功能模块的由来,这是鸟大大的处女秀,为什么这么说呢?一天在群里,一个 ...

  7. Javascript登录页面“记住密码”实现

    JS记住密码实现效果:  JavaScript Code  1234567891011121314151617181920212223242526272829303132   <!DOCTYPE ...

  8. 登陆jq表单验证及jqcookie记住密码实例

    <p><%@ page contentType="text/html; charset=utf-8"%> <%@taglib prefix=" ...

  9. vue2.0项目记住密码和用户名实例

    的今天突来兴致,试了一下将用户名和密码存在cookie和localStorage里如何实现:从代码难易程度来讲,果断选择了将用户名和密码存在localStorage里面.当然菜鸟上这么说的,楼下. 也 ...

随机推荐

  1. python（22）- 递归和函数式编程

    递归: 在函数内部,可以调用其他函数.如果一个函数在内部调用自身本身,这个函数就是递归函数. 1. 必须有一个明确的结束条件: 2. 每次进入更深一层递归时,问题规模相比上次递归都应有所减少: 3.递 ...

  2. Web框架Django（一）

    Python的WEB框架有Django.Tornado.Flask 等多种,Django相较与其他WEB框架其优势为:大而全,框架本身集成了ORM.模型绑定.模板引擎.缓存.Session等诸多功能. ...

  3. PHP几种抓取网络数据的常见方法

    //本小节的名称为 fsockopen,curl与file_get_contents,具体是探讨这三种方式进行网络数据输入输出的一些汇总.关于 fsockopen 前面已经谈了不少,下面开始转入其它. ...

  4. man screen

    http://www.gnu.org/software/screen/manual/screen.html Screen User's Manual Next: Overview, Previous: ...

  5. 误用了 react-scripts eject 命令

    react 小白编程 由于使用 create-react-app 脚手架构建项目的时候,会给几个命令用 其中一个命令吸引了我的注意力  yarn eject,因为构建完成后特别提示说“你不会想要用到这 ...

  6. 【BZOJ1844/2210】Pku1379 Run Away 模拟退火

    [BZOJ1844/2210]Pku1379 Run Away 题意:矩形区域中有一堆点,求矩形中一个位置使得它到所有点的距离的最小值最大. 题解:模拟退火的裸题,再调调调调调参就行了~ #inclu ...

  7. python2&python3的区别

    区别1. python3中>>>range<3,6>range<3,6> python2中>>>range<3,6>[3,4,5 ...

  8. Java单元测试(Junit+Mock+代码覆盖率)---------转

    Java单元测试(Junit+Mock+代码覆盖率) 原文见此处 单元测试是编写测试代码,用来检测特定的.明确的.细颗粒的功能.单元测试并不一定保证程序功能是正确的,更不保证整体业务是准备的. 单元测 ...

  9. 2017NOIP游记 (格式有点炸)

    NOIP游记 作者:一只小蒟蒻 时间可真快呀!还记得我第一次接触信息竞赛时,hello world都要调好久,不知不觉就考完了2017noip,自我感觉良好(虽然还是有很多不足). 这两个月的闭关,让 ...

  10. android实现跑马灯效果

    第一步:新建一个新项目,MarqueeTextView 首先为了观察到跑马灯效果,将要显示的文字极可能 写长.在strings.xml目录里面将 <string name="hello ...