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. C语言关键字—-sizeof 、typedef、const、static、register、extern、#define

    关键字:sizeof .#define.typedef.const.static.register.extern sizeof 1. 作用:求数据所占得内存空间大小 2. 本质:求数据得类型所占的内存 ...

  2. liunx安装redis和gcc

    首先去上下载redis,我现在用的版本是:redis-3.0.4.tar.gz 然后放到虚拟机里面解压,下面是三种解压命令: tar -zxvf file.tar.gz tar -jcvf file ...

  3. ASP.NET MVC模式——WebPages

    WebPages 示例 123456<html> <body> <h1>Hello Web Pages</h1> <p>The time i ...

  4. VS + Qt5Designer + Anaconda环境配置

    最近打算做一个模型训练工具,从来都不喜欢做UI的我,最终把目光放在了QtDesigner上.配环境的过程中在网上翻阅了不少博客,但大多是pycharm或者是VScode,使用VS的似乎不多.所以打算记 ...

  5. 基于Kubernetes 构建.NET Core技术中台

    今天下午在腾讯云+社区社区分享了<基于Kubernetes 构建.NET Core技术中台>,下面是演讲内容的文字实录. 我们为什么需要中台 我们现在处于企业信息化的新时代.为什么这样说呢 ...

  6. 第 1 章 第 1 题 高级语言的排序问题 C++标准算法实现

    问题分析 依题意,所需程序不用过多考虑效率且暗示使用库,自然想到用高级语言实现(个人选择C++).可用顺序容器暂存数据,用标准算法解决排序问题. 代码实现 #include <iostream& ...

  7. arcgis for javascript 隐藏或显示底图

    arcgis for javascript展示地图的时候,有图层的概念,一层一层的,类似photoshop,在应用界面上控制图层的显隐,是极常见的功能. 但是,如果是控制底图的显示或隐藏呢,怎么搞? ...

  8. [JAVA &#183; 0基础]：16.经常使用类

    基本类型包装 为什么须要包装类? JAVA并非纯面向对象的语言.Java语言是一个面向对象的语言.可是Java中的基本数据类型却是不面向对象的.可是我们在实际使用中常常须要将基本数据转化成对象,便于操 ...

  9. jQuery事件函数位置放置的两种方法

    jQuery 事件函数 jQuery 事件处理方法是 jQuery 中的核心函数. 事件处理程序指的是当 HTML 中发生某些事件时所调用的方法. 通常会把 jQuery 代码放到 <head& ...

  10. codeforces A. Punctuation 解题报告

    题目链接:http://codeforces.com/problemset/problem/147/A 题目意思:给定一篇文章,需要对这篇文章进行编辑,使得:(1)两个单词之间有一个空格分开  (2) ...