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中，本地存储是一个窗口的属性，包括localStorage和sessionStorage ，从名字应该可以很容易的辨认识别的区别，前者是一直存在本地的，只是伴随着session ，窗口一旦关闭就没了。多个适当的完全相同，这里以localStorage为例。

 

if（window.localStorage）{

 alert（'此浏览器支持localStorage'）;

} else {

 alert（'此浏览器不支持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还提供了一个键（ ）方法，可以在不知道有一些键值的时候使用，如下：

 

var storage = window.localStorage;

函数showStorage（）{

 for（var i = 0; i  // key（i）获得相应的键，再用getItem（）方法获得对应的值

  document.write（storage.key（i）+“：” + storage.getItem（storage.key（i））+“

” ）;

 }

}

 

 

写一个最简单的，利用本地存储的计数器：

 

var storage = window.localStorage;

如果（！storage.getItem（“ pageLoadCount”））storage.setItem（“ pageLoadCount”，0）;

storage.pageLoadCount = parseInt（storage.getItem（“ pageLoadCount”））+ 1; //必须格式转换

document.getElementByIdx_x（“ count”）。innerHTML = storage.pageLoadCount;

showStorage（）;

 

不断刷新能够看到数字在一点点增长

 

 

需要注意的是，HTML5本地存储只能存储二进制，任何格式存储的时候都会被自动转为串行，所以读取的时候，需要自己进行类型的转换。这也就是上一段代码中parseInt必须要使用的原因。

 

 

 

另外，在iPhone / iPad的上有时设置setItem（）时会出现诡异的QUOTA_EXCEEDED_ERR错误，这时一般在setItem之前，先的removeItem（）就确定了。

 

 

 

HTML5的本地存储，还提供了一个存储事件，可以对键值对的改变进行监听，使用方法如下：

 

if（window.addEventListener）{

 window.addEventListener（“ storage”，handle_storage，false）;

}其他if（window.attachEvent）{

 window.attachEvent（“ onstorage”，handle_storage）;

}

函数handle_storage（e）{

 if（！e）{e = window.event;}

 // showStorage（）;

}

 

 

 

对于事件变量e ，是一个StorageEvent对象，提供了一些实用的属性，可以很好的观察键值对的变化，如下表：

 

 财产

 

 类型

 

 描述

 

 钥匙

 

 细绳

 

 添加，删除或修改的命名密钥

 

 旧值

 

 任何

 

 先前的值（现已覆盖）；如果添加了新项目，则为null

 

 newValue

 

 任何

 

 新值；如果添加了项目，则为null

 

 网址/ uri

 

 细绳

 

 调用触发此更改的方法的页面

 

 

 

这里添加两个键值对a和b ，并增加一个按钮。给a设置固定的值，当点击按钮时，修改b的值：

 

您已经浏览过此页面 0次。

 

测试发现，目前浏览器对这个支持不太好，仅iPad和Firefox支持，而且Firefox支持得乱糟糟，e对象根本没有那些属性。iPad支持非常好，用的是e.uri （不是e.url ），台式机上的Safari不行，诡异。

 

 

目前浏览器都具备很好的开发者调试功能，下面分别是Chrome和Firefox的调试工具查看LocalStorage ：

 

 

另外，目前的JavaScript使用非常多的json格式，如果希望存储在本地，可以直接调用JSON.stringify（）将其转为编码。读取出来后调用JSON.parse（）将字符串转为json格式，如下所示：

var details = {作者：“ isaac”，“描述”：“ fresheggs”，“评分”：100};

storage.setItem（“ details”，JSON.stringify（details））;

details = JSON.parse（storage.getItem（“ details”））;

 

JSON对象在支持localStorage的浏览器上基本都支持，需要注意的是IE8 ，它支持JSON ，但如果添加了如下的兼容模式代码，切到IE7模式就不行了（此时依然支持localStorage ，虽然显示窗口.localStorage是[object] ，而不是之前的[object Storage] ，但测试发现getItem（），setItem（）等均能使用）。