trackbacks-0
HTML5&LocalStorage&本地存储
说到本地存储，这玩意真是历尽千辛万苦才走到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为例。
if(window.localStorage){&alert('This&browser&supports&localStorage');}else{&alert('This&browser&does&NOT&support&localStorage');}
存储数据的方法就是直接给window.localStorage添加一个属性，例如：window.localStorage.a&或者&window.localStorage["a"]。它的读取、写、删除操作方法很简单，是以键值对的方式存在的，如下：
localStorage.a&=&3;//设置a为"3"localStorage["a"]&=&"sfsf";//设置a为"sfsf"，覆盖上面的值localStorage.setItem("b","isaac");//设置b为"isaac"var&a1&=&localStorage["a"];//获取a的值var&a2&=&localStorage.a;//获取a的值var&b&=&localStorage.getItem("b");//获取b的值localStorage.removeItem("c");//清除c的值
这里最推荐使用的自然是getItem()和setItem()，清除键值对使用removeItem()。如果希望一次性清除所有的键值对，可以使用clear()。另外，HTML5还提供了一个key()方法，可以在不知道有哪些键值的时候使用，如下：
var&storage&=&window.localSfunction&showStorage(){&for(var&i=0;i&storage.i++){&&//key(i)获得相应的键，再用getItem()方法获得对应的值&&document.write(storage.key(i)+&"&:&"&+&storage.getItem(storage.key(i))&+&"&br&");&}}
写一个最简单的，利用本地存储的计数器：
var&storage&=&window.localSif&(!storage.getItem("pageLoadCount"))&storage.setItem("pageLoadCount",0);storage.pageLoadCount&=&parseInt(storage.getItem("pageLoadCount"))&+&1;//必须格式转换document.getElementByIdx_x("count").innerHTML&=&storage.pageLoadCshowStorage();
不断刷新就能看到数字在一点点上涨，如下图所示：
需要注意的是，HTML5本地存储只能存字符串，任何格式存储的时候都会被自动转为字符串，所以读取的时候，需要自己进行类型的转换。这也就是上一段代码中parseInt必须要使用的原因。
另外，在iPhone/iPad上有时设置setItem()时会出现诡异的QUOTA_EXCEEDED_ERR错误，这时一般在setItem之前，先removeItem()就ok了。
HTML5的本地存储，还提供了一个storage事件，可以对键值对的改变进行监听，使用方法如下：
if(window.addEventListener){&window.addEventListener("storage",handle_storage,false);}else&if(window.attachEvent){&window.attachEvent("onstorage",handle_storage);}function&handle_storage(e){&if(!e){e=window.}&//showStorage();}
对于事件变量e，是一个StorageEvent对象，提供了一些实用的属性，可以很好的观察键值对的变化，如下表：
&Description
&The&named&key&that&was&added,&removed,&or&moddified
&The&previous&value(now&overwritten),&or&null&if&a&new&item&was&added
&The&new&value,&or&null&if&an&item&was&added
&The&page&that&called&the&method&that&triggered&this&change
这里添加两个键值对a和b，并增加一个按钮。给a设置固定的值，当点击按钮时，修改b的值：
&body&&p&You&have&viewed&this&page&&span&id="count"&0&/span&&&time(s).&/p&&p&&input&type="button"&value="changeStorage"&onClick="changeS()"/&&/p&&script&var&storage&=&window.localSif&(!storage.getItem("pageLoadCount"))&storage.setItem("pageLoadCount",0);storage.pageLoadCount&=&parseInt(storage.getItem("pageLoadCount"))&+&1;//必须格式转换document.getElementByIdx_x("count").innerHTML&=&storage.pageLoadCshowStorage();if(window.addEventListener){&window.addEventListener("storage",handle_storage,false);}else&if(window.attachEvent){&window.attachEvent("onstorage",handle_storage);}function&handle_storage(e){&if(!e){e=window.}&showObject(e);}function&showObject(obj){&//递归显示object&if(!obj){}&for(var&i&in&obj){&&if(typeof(obj[i])!="object"&||&obj[i]==null){&&&document.write(i&+&"&:&"&+&obj[i]&+&"&br/&");&&}else{&&&document.write(i&+&"&:&object"&+&"&br/&");&&}&}}storage.setItem("a",5);function&changeS(){&//修改一个键值，测试storage事件&if(!storage.getItem("b")){storage.setItem("b",0);}&storage.setItem('b',parseInt(storage.getItem('b'))+1);}function&showStorage(){&//循环显示localStorage里的键值对&for(var&i=0;i&storage.i++){&&//key(i)获得相应的键，再用getItem()方法获得对应的值&&document.write(storage.key(i)+&"&:&"&+&storage.getItem(storage.key(i))&+&"&br&");&}}&/script&&/body&
测试发现，目前浏览器对这个支持不太好，仅iPad和Firefox支持，而且Firefox支持得乱糟糟，e对象根本没有那些属性。iPad支持非常好，用的是e.uri（不是e.url），台式机上的Safari不行，诡异。
目前浏览器都带有很好的开发者调试功能，下面分别是Chrome和Firefox的调试工具查看LocalStorage：
另外，目前javascript使用非常多的json格式，如果希望存储在本地，可以直接调用JSON.stringify()将其转为字符串。读取出来后调用JSON.parse()将字符串转为json格式，如下所示：
var&details&=&{author:"isaac","description":"fresheggs","rating":100};storage.setItem("details",JSON.stringify(details));details&=&JSON.parse(storage.getItem("details"));
JSON对象在支持localStorage的浏览器上基本都支持，需要注意的是IE8，它支持JSON，但如果添加了如下的兼容模式代码，切到IE7模式就不行了（此时依然支持localStorage，虽然显示window.localStorage是[object]，而不是之前的[object&Storage]，但测试发现getItem()、setItem()等均能使用）。
&meta&content="IE=7"&http-equiv="X-UA-Compatible"/&
阅读(...) 评论()为什么IE8以上不支持localStorage_百度知道
为什么IE8以上不支持localStorage
提问者采纳
localStorage){alert(&body&}else{alert(&/}} &lt，通过查阅官方资料了解到; & &lt.7;not support&html&script&t support localStorage for local files即IE9 localStorage不支持本地文件，发现当前使用的IE9版本是支持localStorage的那么问题出在什么地方呢，但是笔者今天做了个小demo测试;&javascript&html&gt.2：&&#47，出现了下面的问题;/support& &lt按照官网说法IE8及以上的版本均支持localS&script type=& &script src=&quot，那么笔者将刚刚的测试页面部署到TomCat服务器;head&&script&gt：IE9 doesn');jquery-1; &/;Test LocalStorage &lt，再开启页面查看.js&body&);head&&text&#47.onload=function(){if(&但是通过html5test网站查询：代码!DOCTYPE HTML&&#47.min
来自团队：
其他类似问题
为您推荐：
等待您来回答
下载知道APP
随时随地咨询
出门在外也不愁当前访客身份：游客 [
花开花落，各有缘由，保留初心，快乐生长
：不错，感谢
：引用来自“明月依稀”的评论指定读取字节数判断编...
：指定读取字节数判断编码行不通。。。各种挂起。。。
：引用来自“我是一根葱”的评论哥们辛苦了，给点建...
：引用来自“xujw0201”的评论错别字确实有点多，比...
：引用来自“xujw0201”的评论错别字确实有点多，比...
：错别字确实有点多，比如第一句：简单“德”日志系统
：引用来自“我是一根葱”的评论哥们辛苦了，给点建...
：引用来自“我是一根葱”的评论哥们辛苦了，给点建...
今日访问：0
昨日访问：6
本周访问：6
本月访问：188
所有访问：24123
网页离线进行本地存储使用 Localstorage和userdata 实现，兼容主流浏览器
发表于2年前( 23:27)&&
阅读（563）&|&评论（）
0人收藏此文章,
本文是有借鉴网上前辈们写过的，以及自己添加和修改了一些方法。我在chrome,firefox，ie8,ie9和ie10兼容模式测试下均可正常运行，放在这里给需要的人用吧。
这里先简单介绍下localstorage和userdata.
localstorage是html5特性，支持本地存储容量很大，而userdata是ie家的。虽然从ie8就开始支持localstorage了，但是需要html在服务器端，如果是本地的话ie是不支持的。而以下代码是可以在离线情况下进行本地存储的，主要的思路是我将localstorage和userdata都封装成同样的方法接口，判断浏览器类型进而使用不同的特性实现同样的接口。这样做的好处就是，操作的方法不会随浏览器改变而再写一遍。其实也挺简单的。
&script type="text/javascript"&
var Sys = {};
var ua = navigator.userAgent.toLowerCase();
(s = ua.match(/msie ([\d.]+)/)) ? Sys.ie = s[1] :
(s = ua.match(/firefox\/([\d.]+)/)) ? Sys.firefox = s[1] :
(s = ua.match(/chrome\/([\d.]+)/)) ? Sys.chrome = s[1] :
//以下进行测试
if (Sys.firefox)
var local = {
setItem:function(nam,val)
window.localStorage.setItem(nam,val);
getItem:function(nam)
return window.localStorage.getItem(nam);
removeItem:function(nam)
window.localStorage.removeItem(nam);
clear:function()
window.localStorage.clear();
length:function()
window.localStorage.length();
key:function(i)
window.localStorage.key(i);
document.write('Firefox: ' + Sys.firefox);
if (Sys.ie)
box = document.body || document.getElementsByTagName("head")[0] || document.documentE
UserData_obj = document.createElement('input');
UserData_obj.type = "hidden";
UserData_obj.addBehavior ("#default#userData");
box.appendChild(UserData_obj);
//设定对象
var local= {
setItem:function(nam,val)
UserData_obj.load(nam);
UserData_obj.setAttribute(nam,val);
var d= new Date();
d.setDate(d.getDate()+700);
UserData_obj.expires=d.toUTCString();
UserData_obj.save(nam);
UserData_obj.load("local_userdata");
var dt=UserData_obj.getAttribute("local_userdata");
if(dt==null)dt='';
var reg=new RegExp(nam);
//判断nam名字是否存在，不存在添加进去
if(!reg.test(dt)){
dt=dt+nam+",";
UserData_obj.setAttribute("local_userdata",dt);
UserData_obj.save("local_userdata");
//模拟 setItem
getItem:function(nam)
UserData_obj.load(nam);
return UserData_obj.getAttribute(nam);
//模拟 getItem
removeItem:function(nam)
UserData_obj.load(nam);
clear_userdata(nam);
UserData_obj.load("local_userdata");
var dt=UserData_obj.getAttribute("local_userdata");
var reg=new RegExp(nam+",","g");
dt=dt.replace(reg,'');
var d= new Date();
d.setDate(d.getDate()+700);
UserData_obj.expires= d.toUTCString();
UserData_obj.setAttribute("local_userdata",dt);
UserData_obj.save("local_userdata");
//模拟 removeItem
clear:function()
UserData_obj.load("local_userdata");
var dts=UserData_obj.getAttribute("local_userdata").split(",");
for (var i in dts)
if(dts[i]!='')
UserData_obj.load(dts[i]);
UserData_obj.removeAttribute(dts[i]);
clear_userdata(dts[i]);
UserData_obj.load("local_userdata");
UserData_obj.removeAttribute("local_userdata");
clear_userdata("local_userdata")
//模拟 clear();
clear2:function()
UserData_obj.load("local_userdata");
var dts=UserData_obj.getAttribute("local_userdata").split(",");
for (var i in dts)
if(dts[i]!='')
UserData_obj.load(dts[i]);
UserData_obj.removeAttribute(dts[i]);
clear_userdata(dts[i]);
clear_userdata("local_userdata");
each:function()
UserData_obj.load("local_userdata");
var dts=UserData_obj.getAttribute("local_userdata").split(",");
for(var i in dts){
alert(dts[i]);
function clear_userdata(keyname)//将名字为keyname的变量消除
var d= new Date();
d.setDate(d.getDate()-1);
UserData_obj.load(keyname);
UserData_obj.expires=d.toUTCString();
UserData_obj.save(keyname);
document.write('IE: ' + Sys.ie);
if (Sys.chrome){
setItem:function(nam,val)
window.localStorage.setItem(nam,val);
getItem:function(nam)
return window.localStorage.getItem(nam);
removeItem:function(nam)
window.localStorage.removeItem(nam);
clear:function()
window.clear();
length:function()
window.localStorage.length();
key:function(i)
window.localStorage.key(i);
document.write('chrome: ' + Sys.chrome);
&script type="text/javascript"&
window.local.setItem("name_new1","1liangli")
var name1 = window.local.getItem("name_new1");
document.write(name1);
document.write("&/br&");
&/html& 参考地址：
&&&&&&&&&&&&&&&&
更多开发者职位上
1)">1)">1" ng-class="{current:{{currentPage==page}}}" ng-repeat="page in pages"><li class='page' ng-if="(endIndex<li class='page next' ng-if="(currentPage
相关文章阅读为什么IE8以上不支持localStorage_百度知道
为什么IE8以上不支持localStorage
提问者采纳
body& & &&#47，果然可以了，但是笔者今天做了个小demo测试;&/ &lt：代码;);;html&gt，再开启页面查看：IE9 doesn&#39;script&gt.localStorage){alert(&not support& &lt：&lt.head&javascript&quot.7，出现了下面的问题.2;text/head&gt，那么笔者将刚刚的测试页面部署到TomCat服务器;);&t support localStorage for local files即IE9 localStorage不支持本地文件;}else{alert(&/script src=&}} &lt，发现当前使用的IE9版本是支持localStorage的;&&support&quot，通过查阅官方资料了解到!DOCTYPE HTML&&#47，那么问题出在什么地方呢.onload=function(){if( &script&body&但是通过html5test网站查询;Test LocalStorage &script type=&jquery-1;/html&&gt.js&quot按照官网说法IE8及以上的版本均支持localStorage
来自团队：
其他类似问题
为您推荐：
等待您来回答
下载知道APP
随时随地咨询
出门在外也不愁