HTML5的LocalStorage实现记住密码
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();
原文地址：
其他资料：
HTMl5的存储方式sessionStorage和localStorage详解
javascript记住用户名和登录密码（两种方式）cookie
HTML5的LocalStorage实现记住密码的更多相关文章
- 超简单的localStorage实现记住密码的功能
HTML5 提供了两种在客户端存储数据的新方法: localStorage - 没有时间限制的数据存储 sessionStorage - 针对一个 session 的数据存储 之前,这些都是由 coo ...
- localStorage保存账号密码
首先是判断浏览器是否支持这一属性,他是HTML5里的属性: if(window.localStorage){ alert('支持');}else{ alert('不支持');} localStorag ...
- local storage 简单应用‘’记住密码’
前些时候一直用cookie等来进行登录页面记住面膜操作,但是由于其存储容量小等缘故,所以后来转向local storage,原理为:当用户勾选记住密码时,local storage 存储用户名密码同时 ...
- jquery 记住账号 记住密码
<body> <label><input type="checkbox" onclick="loginBtn_user()" /& ...
- vue中使用cookies和crypto-js实现记住密码和加密
前端加密 使用crypto-js加解密 第一步,安装 npm install crypto-js 第二步,在你需要的vue组件内import import CryptoJS from "cr ...
- 基于localStorge开发登录模块的记住密码与自动登录
前沿||我是乐于分享,善于交流的鸟窝 先做写一篇关于登录模块中记住密码与自动登录的模块.鸟窝微信:jkxx123321 关于这个模块功能模块的由来,这是鸟大大的处女秀,为什么这么说呢?一天在群里,一个 ...
- Javascript登录页面“记住密码”实现
JS记住密码实现效果: JavaScript Code 1234567891011121314151617181920212223242526272829303132 <!DOCTYPE ...
- 登陆jq表单验证及jqcookie记住密码实例
<p><%@ page contentType="text/html; charset=utf-8"%> <%@taglib prefix=" ...
- vue2.0项目记住密码和用户名实例
的今天突来兴致,试了一下将用户名和密码存在cookie和localStorage里如何实现:从代码难易程度来讲,果断选择了将用户名和密码存在localStorage里面.当然菜鸟上这么说的,楼下. 也 ...
随机推荐
- Block系列1：初识block
//-------1.定义函数----- //1.函数 int sum(int a,int b) { return a+b; } //------------------2.声明--------- / ...
- Canvas学习笔记——动画中摩擦力的运用
摩擦力是与物体运动方向相反的力.我们在处理物体运动时,常把物体分解水平(X轴)方向和竖直(Y轴)方向的运动(比如平抛运动),但在处理摩擦力时,如果把摩擦力分解为X轴和Y轴上的阻力,就会出现某条轴上速度 ...
- API网关如何实现对服务下线实时感知
上篇文章<Eureka 缓存机制>介绍了Eureka的缓存机制,相信大家对Eureka 有了进一步的了解,本文将详细介绍API网关如何实现服务下线的实时感知. 一.前言 在基于云的微服务应 ...
- gridcontrol复选框功能实现（超具体）
博主这几天就准备离职了,以后不再做.Net开发.因此这应该是我写的最后一篇关于dev控件的博文.既然是最后一篇,那就写的具体一些.画个圆满的省略号...... 本文介绍gridcontrol怎样实现复 ...
- 版本控制器 git
摘要:版本控制器是码农必备的工具,很多常用的,像svn,git,cvs等,工作中用过svn,Tortoisehg,firefly,其实大同小异,现在简单介绍下git,以及它的一些常用命令. 在wind ...
- 《UNIX 网络编程 第二版》编译环境的搭建( 运行本专栏代码必读 )
第一步:搭建基本的编译环境 安装gcc, g++, bulid-essential等编译软件 第二步:下载本书示例源码包 可在这里下载http://ishare.iask.sina.com.cn/f/ ...
- xlua学习过程遇到的问题，以后通了之后可能就不是问题了。但是还是有记录的必要。
//2.加载lua文件,这里这种方式只能够加载Resources文件夹下面的,并且是lua.txt类型的文件,感觉没啥乱用. //文档你说的是Resources文件夹下面的才需要加txt后缀,那么就是 ...
- 【BZOJ2625】[Neerc2009]Inspection 最小流
[BZOJ2625][Neerc2009]Inspection Description You are in charge of a team that inspects a new ski reso ...
- EasyDarwin开源流媒体服务器如何实现按需推送直播的
--本文转自EasyDarwin开源团队成员邵帅的博客:http://blog.csdn.net/ss00_2012/article/details/51441753 我们使用EasyDarwin的推 ...
- 九度OJ 1115：数字求和 （基础题）
时间限制:1 秒 内存限制:32 兆 特殊判题:否 提交:2396 解决:1507 题目描述: 给定一个正整数a,以及另外的5个正整数,问题是:这5个整数中,小于a的整数的和是多少? 输入: 输入一行 ...