文档介绍：HTML5 本地存储 LocalStorage (2010-10-31 20:39:59) 转载▼标签: html5 本地存储 localstorage sessionstorag e storage 分类: 前端技术(转载请注明出处: http://blog./s/ ) 说到本地存储,这玩意真是历尽千辛万苦才走到 HTML5 这一步,之前的历史大概如下图所示: 最早的 Cookies 自然是大家都知道,问题主要就是太小,大概也就 4KB 的样子, 而且 IE6 只支持每个域名 20个 cookies ,太少了。优势就是大家都支持,而且支持得还蛮好。很早以前那些禁用 cookies 的用户也都慢慢的不存在了,就好像以前禁用 javascript 的用户不存在了一样。 userData 是 IE的东西,垃圾。现在用的最多的是 Flash 吧,空间是 Cookie 的25 倍,基本够用。再之后 Google 推出了 Gears ,虽然没有限制,但不爽的地方就是要装额外的插件(没具体研究过)。到了 HTML5 把这些都统一了,官方建议是每个网站 5MB ,非常大了,就存些字符串,足够了。比较诡异的是居然所有支持的浏览器目前都采用的 5MB ,尽管有一些浏览器可以让用户设置,但对于网页制作者来说,目前的形势就 5MB 来考虑是比较妥当的。支持的情况如上图, IE在 的时候就支持了,非常出人意料。不过需要注意的是, IE、 Firefox 测试的时候需要把文件上传到服务器上(或者 localhost ),直接点开本地的 HTML 文件,是不行的。首先自然是检测浏览器是否支持本地存储。在 HTML5 中,本地存储是一个 window 的属性,包括 localStorage 和 sessionStorage ,从名字应该可以很清楚的辨认二者的区别,前者是一直存在本地的,后者只是伴随着 session ,窗口一旦关闭就没了。二者用法完全相同,这里以 localStorage 为例。 if(){ alert('This browser supports localStorage'); }else{ alert('This browser does NOT support localStorage'); } 存储数据的方法就是直接给 添加一个属性,例如: 或者 ["a"] 。它的读取、写、删除操作方法很简单,是以键值对的方式存在的,如下: = 3;// 设置 a为"3" localStorage["a"] = "sfsf";// 设置 a为"sfsf" ,覆盖上面的值 ("b","isaac");// 设置 b为"isaac" var a1= localStorage["a"];// 获取 a的值 var a2= ;// 获取 a的值 var b= ("b");// 获取 b的值 ("c");// 清除 c的值这里最推荐使用的自然是 getItem() 和 setItem() ,清除键值对使用 removeItem() 。如果希望一次性清除所有的键值对,可以使用 clear() 。另外, HTML5 还提供了一个 key() 方法,可以在不知道有哪些键值的时候使用,如下: var storage = ; function showStorage(){ for(var i=0,l=;i //key(i) 获得相应的键,再用 getItem() 方法获得对应的值 ((i)+ ":"+ ((i)) +" ");}} 写一个最简单的,利用本地存储的计数器: var storage = ; if (!("pageLoadCount")) ("pageLoadCount",0); = parseInt(("pageLoadCount")) + 1;// 必须格式转换