您的位置：首页 > Web前端 > HTML5

html5本地存储localstorage

2014-05-12 09:46 447 查看
说到本地存储，这玩意真是历尽千辛万苦才走到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  onclick="loginCheckAjaxFunction()"  class="button glow button-rounded button-flat-action">登录</a>
</div>
</form>
</body>
</html>


参考资料：www.cnblogs.com/xiaowei0705/archive/2011/04/19/2021372.html
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航