html5本地存储localstorage

来源：互联网发布：win7引导ubuntu双系统编辑：程序博客网时间：2024/05/19 03:42

说到本地存储，这玩意真是历尽千辛万苦才走到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

3 0