说起HTML5的存储，真是个神奇的玩意儿！以前咱们在网页上填写的信息，一不小心就没了，真让人抓狂。但现在，有了localStorage和sessionStorage这两个好帮手，这个烦人事儿可以轻易解决！
咱们聊聊，localStorage跟sessionStorage有啥区别？
LocalStorage和SessionStorage就像是我们电脑上的小仓库，只要你不去动它，放什么都行，永远不会不见，超级稳定。不过，它们俩还是有区别的。SessionStorage就像瞬息即逝的爱情，一离开页面，啥都没咯。要是用对地方，这两个小家伙能让网页浏览变得更有趣！
如何存储数据
if(window.localStorage){
alert('This browser supports localStorage');
}else{
alert('This browser does NOT support localStorage');
}
存储数据别担心，轻松加上一个属性就好！比如说，要存个名叫”a”的数据，直接写window.localStoragea或者window.localStorage[“a”]就可以了，这样简单明了的方法，让你的数据管理起来更顺手。
读取、写、删除操作
看这多简单明了！想读取a的值？那你就用window.localStorage.getItem(“a”)；想给a赋个新值？那就用window.localStorage.setItem(“a”,”value”)；如果你觉得a没用了，那就用window.localStorage.removeItem(“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的值
key()方法的使用
HTML5还给了咱们一个超好用的小助手——key(),特别适合记性差的小伙伴们找回遗忘的数据。这家伙就像个聪明伶俐的小秘书，总能在你需要它时马上跳出来。
var storage = window.localStorage;
function showStorage(){
for(var i=0;i");
}
}
数据类型的转换
var storage = window.localStorage;
if (!storage.getItem("pageLoadCount")) storage.setItem("pageLoadCount",0);
storage.pageLoadCount = parseInt(storage.getItem("pageLoadCount")) + 1;//必须格式转换
document.getElementByIdx_x("count").innerHTML = storage.pageLoadCount;
showStorage();
记得，HTML5的本地储存只认字符串。也就是说，你存什么进去，最后都变成字符串来保存。那要怎么取出来？别急，还得靠你自己搞定类型转换这就像是你把东西塞到只有字的箱子里去，拿出来后可得费点功夫重新组装起来。
iPhone/iPad上的问题
各位你们有没有遇见过这个叫QUOTA_EXCEEDED_ERR的小麻烦？别担心，这个事儿其实就跟手机欠费一样简单。你只需要在设置之前，把那啥玩意儿removeItem()掉就好了！
storage事件的监听
HTML5大升级，分分钟搞定本地储存，还有一个名叫storage的神奇事件，可以帮你监控键值对的任何变动。有了这个功能，你的数据就像有了贴身保镖，24小时守护，再也不怕被人偷窥！
开发者调试功能
我们现在的浏览器好厉害，Chrome和Firefox里都能随意调出LocalStorage，就像个小巧玲珑的数据放大镜，让你看得明明白白。
JSON格式的存储
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.event;}
//showStorage();
}
JSON保存数据很简单！只要把数据转成字符串，交给JSON.stringify()就行了。这就像给你的数据上了个保险柜，让你安心存储。
IE8的兼容问题
you have viewed this page 0 time(s).
var storage = window.localStorage; if (!storage.getItem("pageLoadCount")) storage.setItem("pageLoadCount",0); storage.pageLoadCount = parseInt(storage.getItem("pageLoadCount")) + 1;//必须格式转换 document.getElementByIdx_x("count").innerHTML = storage.pageLoadCount; showStorage(); 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.event;} showObject(e); } function showObject(obj){ //递归显示object if(!obj){return;} for(var i in obj){ if(typeof(obj[i])!="object" || obj[i]==null){ document.write(i + " : " + obj[i] + "
"); }else{ document.write(i + " : object" + "
"); } } } 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.length;i++){ //key(i)获得相应的键，再用getItem()方法获得对应的值 document.write(storage.key(i)+ " : " + storage.getItem(storage.key(i)) + "
"); } }
要告诉你，如果在IE8用兼容模式编码，那么一旦切换到IE7就可能出问题。这时，虽然本地存储还能用，但window.localStorage会变成[object]，不是原来的[objectStorage]了。这就像是你的资料放在不同的地方那样，不太适应咯。
HTML5的本地存储挺给力的，操作简单又好用，用户们肯定喜欢。但是记住，别掉进坑里了，这样网页才能更好看！
最后有木有人说说，用HTML5本地存储时遇到过哪些烦人的问题？快点告诉我，别忘了顺便点赞分享这样其他小伙伴们也能知道这个小技巧怎么样。
评论0