html5本地存储localstorage

最新推荐文章于 2023-02-22 21:42:56 发布

yibosun

最新推荐文章于 2023-02-22 21:42:56 发布

阅读量1.5w

点赞数 4

分类专栏： HTML5

本文链接：https://blog.csdn.net/happyflyingave/article/details/25415413

版权

HTML5 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

说到本地存储，这玩意真是历尽千辛万苦才走到HTML5这一步，之前的历史大概如下图所示：

最早的Cookies自然是大家都知道，问题主要就是太小，大概也就4KB的样子，而且IE6只支持每个域名20个cookies，太少了。优势就是大家都支持，而且支持得还蛮好。很早以前那些禁用cookies的用户也都慢慢的不存在了，就好像以前禁用javascript的用户不存在了一样。

userData是IE的东西，垃圾。现在用的最多的是Flash吧，空间是Cookie的25倍，基本够用。再之后Google推出了Gears，虽然没有限制，但不爽的地方就是要装额外的插件（没具体研究过）。到了HTML5把这些都统一了，官方建议是每个网站5MB，非常大了，就存些字符串，足够了。比较诡异的是居然所有支持的浏览器目前都采用的5MB，尽管有一些浏览器可以让用户设置，但对于网页制作者来说，目前的形势就5MB来考虑是比较妥当的。

支持的情况如上图，IE在8.0的时候就支持了，非常出人意料。不过需要注意的是，IE、Firefox测试的时候需要把文件上传到服务器上（或者localhost），直接点开本地的HTML文件，是不行的。

首先自然是检测浏览器是否支持本地存储。在HTML5中，本地存储是一个window的属性，包括localStorage和sessionStorage，从名字应该可以很清楚的辨认二者的区别，前者是一直存在本地的，后者只是伴随着session，窗口一旦关闭就没了。二者用法完全相同，这里以localStorage为例。

用户名、密码保存，自动登录等，可以通过设置cookie实现，第一次登录网站后在本地计算机的中写入cookie，之后再次登录此网站查看cookie中现有的值，用cookie值进行网站登录即可。但是 cookie 不适合大量数据的存储，因为它们由每个对服务器的请求来传递，这使得 cookie 速度很慢而且效率也不高。

HTML5提供了一个此类问题比较方便的解决方案，就是localstorage。数据不是由每个服务器请求传递的，而是只有在请求时使用数据。它使在不影响网站性能的情况下存储大量数据成为可能。对于不同的网站，数据存储于不同的区域，并且一个网站只能访问其自身的数据。HTML5 使用 JavaScript 来存储和访问数据。

下面是一个登录保存用户名密码的实例：

代码如下：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>登录</title>

<script>
$(document).ready(function(){
  //读取 localStage 本地存储，填充用户名密码,如果自动登录有值直接跳转；
  //相反，跳转到本页面,等待登陆处理
  
  var storage = window.localStorage;
	var getname = storage["name"];
	var getPwd = storage["pwd"];
	var getisstroepwd = storage["isstorePwd"];
	var getisautologin = storage["isautologin"];
	if("yes" == getisstroepwd)
	{
		if("yes" == getisautologin)
		{
			if(( ("" != getname) ||(null != getname)) && (("" != getPwd) ||(null != getPwd)))
			{
				//lacoste  已经保存 登陆信息 直接登陆
				$("#loginAccout").val(getname);
				$("#loginPwd").val(getPwd);
				window.location="";	
			}
		}
		else
		{	
				$("#loginAccout").val(getname);
				$("#loginPwd").val(getPwd);
				document.getElementById("isRemberPwdId").checked = true;
		}
	}
  });

function loginCheckAjaxFunction()
{
	//ajax   登陆验证
	var userAccout=$("#loginAccout").val();
	var userPassWord=$("#loginPwd").val();

	var storage = window.localStorage;
	//记住密码
	if(document.getElementById("isRemberPwdId").checked)
	{
		//存储到loaclStage  

		storage["name"] = userAccout;
		storage["pwd"] =  userPassWord;
		storage["isstorePwd"] =  "yes";
	}
	else
	{
		storage["name"] = userAccout;
		storage["isstorePwd"] =  "no";
	}

	//下次自动登录
	if(document.getElementById("isAutoLoginId").checked)
	{
		//存储到loaclStage  
		storage["name"] = userAccout;
		storage["pwd"] =  userPassWord;
		storage["isstorePwd"] =  "yes";
		storage["isautologin"] =  "yes";
	}
	else
	{
		storage["name"] = userAccout;
		storage["isautologin"] =  "no";
	}

	if("" == $("input[name=loginAccout]").val())
	{
		ui.error('输入用户名！',1500);
		document.loginform.loginAccout.focus();
		return;
	}
	if("" == $("input[name=loginPwd]").val())
	{
		ui.error('输入密码！',1500);
		document.loginform.loginPwd.focus();
		return;
	}
	$.ajax({  
        url : "loginCheckAjax.action",  
        type : "post",
        data:{//设置数据源
				loginAccout:$("input[name=loginAccout]").val(),
				loginPwd:$("input[name=loginPwd]").val()
                    },
        dataType:"json",//设置需要返回的数据类型  
			
			success:function(data){
				//登陆成功后的处理
				},
				error:function(){
						ui.error('登陆失败，请重试',2000);
				}//这里不要加","	 
 	   });  
}

</script>

</head>

<body>

	<form name="loginform" action="<%=path %>/Userlogin.action" method="post">
        <div>
            	账户：
            <input type="text" name="loginAccout" id="loginAccout" class="loginInput" size="18" autofocus="autofocus" maxlength="30" required="required" autocomplete="off" placeholder="请输入用户名"  style="height:30px;width:160px"/><br />
        </div>
        <div>
         	     密码：
            <input type="password" name="loginPwd" id="loginPwd" size="18" maxlength="15" class="loginInput" required="required" placeholder="请输入密码" style="height:30px;width:160px"/><br />
        </div>
        
         <div>
            <input type="checkBox" name="isRemberPwd" id="isRemberPwdId"/> 记住密码 
			<input type="checkBox" name="isAutoLogin" id="isAutoLoginId"/> 下次自动登录
        </div>
        
		<div>

		<a  οnclick="loginCheckAjaxFunction()"  class="button glow button-rounded button-flat-action">登录</a>
        </div>    
   	 </form>
</body>
</html>

参考资料：www.cnblogs.com/xiaowei0705/archive/2011/04/19/2021372.html