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可以使用下面的代码：

if(window.localStorage){

 alert("浏览支持localStorage")

}

else

{

 alert("浏览暂不支持localStorage")

}

//或者 if(typeof window.localStorage == 'undefined'){ alert("浏览暂不支持localStorage") }

　　

二、代码demo

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>localStorage</title>

<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>

</head>

<body>

	<form action="" method="post" 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);

                alert("记住密码");

            }else{

                localStorage.removeItem('keyPass');

                alert("部记住密码");

            }

            window.location.reload();

        }

</script>

</html>

三.localStorage的基本用法：

setItem存储value

用途：将value存储到key字段

用法：.setItem( key, value)

代码示例：

localStorage.setItem("site", "js8.in");

getItem获取value

用途：获取指定key本地存储的值

用法：.getItem(key)

代码示例：

var site = localStorage.getItem("site");

removeItem删除key

用途：删除指定key本地存储的值

用法：.removeItem(key)

代码示例：

localStorage.removeItem("site");

clear清除所有的key/value

用途：清除所有的key/value

用法：.clear()

代码示例：

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. 重置浏览器的默认样式（css reset）

    (1)定义:首先css reset指的是重置浏览器的默认样式 (2)作用:因为现在的浏览器很多,并且每个浏览器都有自己的默认样式,这样就会导致一个页面在多个浏览器下展示产生差异,所以我们需要做一些处理 ...

  2. 封装PDO操作数据库

    <?php class DatabaseHandler { /** * sql语句查询 */ public static function query_data ($dataName,$sql, ...

  3. Install Server Backup Manager on CentOS, RHE, and Fedora

    Skip to end of metadata Added by Internal, last edited by Internal on Aug 25, 2014 Go to start of me ...

  4. ANDROID STUDIO 2.2.3 DOWNLOAD FROM DL.GOOGLE.COM

    立即开始使用 Android Studio Android Studio 包含用于构建 Android 应用所需的所有工具. 下载 ANDROID STUDIO2.2.3 FOR WINDOWS (1 ...

  5. 区分拖曳(drag)和点击(click)事件

    假设页面上有一个a标签: <a href="http://www.google.com">google</a> 现在需要对这个标签进行拖放操作,会发现当拖曳 ...

  6. hbase shell删除没实用

    用Xshell登陆linux主机后,在hbase shell下不能使用backspace和delete删除误输的指令,这是Xshell的配置问题: 在File->Properties->T ...

  7. LeetCode(82)题解: Remove Duplicates from Sorted List II

    https://leetcode.com/problems/remove-duplicates-from-sorted-list-ii/ 题目: Given a sorted linked list, ...

  8. Bullet Physics OpenGL 刚体应用程序模板 Rigid Simulation in Bullet

    利用Bullet物理引擎实现刚体的自由落体模拟的模板 Bullet下载地址 Main.cpp #include <GLUT/glut.h> #include <cstdlib> ...

  9. [自动化平台系列] - 初次使用 Macaca-前端自动化测试(3)

    1. 如果是一个列表页面,当要触发编辑页面是如何做的呢?其实我测试只要点击第一条数据去编辑就好啦!如果页面结构如下 <li class="myatc-li"> < ...

  10. ！推荐：下载abap 源代码

    转自http://blog.sina.com.cn/s/blog_4d1570de0100pvhd.html *@------------------------------------------- ...