《html5 localstorage 本地存储》由会员分享，可在线阅读，更多相关《html5 localstorage 本地存储（6页珍藏版）》请在金锄头文库上搜索。
1、HTML5 LocalStorage 本地存储说到本地存储，这玩意真是历尽千辛万苦才走到 HTML5 这一步，之前的历史大概如下图所示：最早的 Cookies 自然是大家都知道，问题主要就是太小，大概也就 4KB 的样子，而且 IE6 只支持每个域名 20 个 cookies，太少了。优势就是大家都支持，而且支持得还蛮好。很早以前那些禁用 cookies 的用户也都慢慢的不存在了，就好像以前禁用 javascript 的用户不存在了一样。userData 是 IE 的东西，垃圾。现在用的最多的是 Flash 吧，空间是 Cookie 的 25 倍，基本够用。再之后 Google 推出了 Gea
2、rs，虽然没有限制，但不爽的地方就是要装额外的插件（没具体研究过）。到了 HTML5 把这些都统一了，官方建议是每个网站 5MB，非常大了，就存些字符串，足够了。比较诡异的是居然所有支持的浏览器目前都采用的 5MB，尽管有一些浏览器可以让用户设置，但对于网页制作者来说，目前的形势就 5MB 来考虑是比较妥当的。支持的情况如上图，IE 在 8.0 的时候就支持了，非常出人意料。不过需要注意的是，IE、Firefox 测试的时候需要把文件上传到服务器上（或者 localhost），直接点开本地的 HTML文件，是不行的。首先自然是检测浏览器是否支持本地存储。在 HTML5 中，本地存储是一个 wi
3、ndow 的属性，包括 localStorage 和 sessionStorage，从名字应该可以很清楚的辨认二者的区别，前者是一直存在本地的，后者只是伴随着 session，窗口一旦关闭就没了。二者用法完全相同，这里以localStorage 为例。if(window.localStorage)alert(This browser supports localStorage);elsealert(This browser does NOT support localStorage);存储数据的方法就是直接给 window.localStorage 添加一个属性，例如：window.local
4、Storage.a 或者 window.localStoragea 。它的读取、写、删除操作方法很简单，是以键值对的方式存在的，如下：localStorage.a = 3;/设置 a 为3localStoragea = sfsf;/设置 a 为sfsf ，覆盖上面的值localStorage.setItem(b,isaac);/设置 b 为isaacvar a1 = localStoragea;/获取 a 的值var a2 = localStorage.a;/获取 a 的值var b = localStorage.getItem(b);/获取 b 的值localStorage.removeIt
5、em(c);/清除 c 的值这里最推荐使用的自然是 getItem()和 setItem()，清除键值对使用 removeItem()。如果希望一次性清除所有的键值对，可以使用 clear()。另外，HTML5 还提供了一个 key()方法，可以在不知道有哪些键值的时候使用，如下：var storage = window.localStorage;function showStorage()for(var i=0;i);写一个最简单的，利用本地存储的计数器：var storage = window.localStorage;if (!storage.getItem(pageLoadCount)
6、 storage.setItem(pageLoadCount,0);storage.pageLoadCount = parseInt(storage.getItem(pageLoadCount) + 1;/必须格式转换document.getElementByIdx_x(count).innerHTML = storage.pageLoadCount;showStorage();不断刷新就能看到数字在一点点上涨，如下图所示： 需要注意的是，HTML5 本地存储只能存字符串，任何格式存储的时候都会被自动转为字符串，所以读取的时候，需要自己进行类型的转换。这也就是上一段代码中 parseInt 必
7、须要使用的原因。另外，在 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,hand
8、le_storage);function handle_storage(e)if(!e)e=window.event;/showStorage();对于事件变量 e，是一个 StorageEvent 对象，提供了一些实用的属性，可以很好的观察键值对的变化，如下表：Property Type Descriptionkey String The named key that was added, removed, or moddifiedoldValue Any The previous value(now overwritten), or null if a new item was added
9、newValue Any The new value, or null if an item was addedurl/uri String The page that called the method that triggered this change这里添加两个键值对 a 和 b，并增加一个按钮。给 a 设置固定的值，当点击按钮时，修改 b 的值：You have viewed this page 0 time(s).var storage = window.localStorage;if (!storage.getItem(pageLoadCount) storage.setItem
10、(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.attachEven
11、t(onstorage,handle_storage);function handle_storage(e)if(!e)e=window.event;showObject(e);function showObject(obj)/递归显示 objectif(!obj)return;for(var i in obj)if(typeof(obji)!=object | obji=null)document.write(i + : + obji + );elsedocument.write(i + : object + );storage.setItem(a,5);function changeS()
12、/修改一个键值，测试 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); 测试发现，目前浏览器对这个支持不太好，仅 iPad 和 Firefox 支持，而且 Firefox 支持得乱糟糟，e 对象根本没有那些属性。iPad 支持非常好，用的是 e.uri（不是 e.url），台式机上的Safari 不行，诡异。目前浏览器都
13、带有很好的开发者调试功能，下面分别是 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()等均能使用）。
