HTML5 本地缓存 window.localStorage
首先自然是检测浏览器是否支持本地存储。在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.localStorage;
function showStorage(){
for(var i=0;i<storage.length;i++){
//key(i)获得相应的键，再用getItem()方法获得对应的值
document.write(storage.key(i)+ " : " + storage.getItem(storage.key(i)) + "<br>");
}
}
写一个最简单的，利用本地存储的计数器：
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本地存储只能存字符串，任何格式存储的时候都会被自动转为字符串，所以读取的时候，需要自己进行类型的转换。这也就是上一段代码中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.event;}
//showStorage();
}
对于事件变量e，是一个StorageEvent对象，提供了一些实用的属性，可以很好的观察键值对的变化，如下表：
| Property | Type | Description |
| key | String | The named key that was added, removed, or moddified |
| oldValue | Any | The previous value(now overwritten), or null if a new item was added |
| newValue | Any | The new value, or null if an item was added |
| url/uri | String | 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.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] + "<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.length;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不行，诡异。
HTML代码
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>本地缓存</title>
<script type="text/javascript">
var Cookie = {};
Cookie.read = function (name) {
var cname = name + "=";
var dc = document.cookie;
if (dc.length > 0) {
begin = dc.indexOf(cname);
if (begin != -1) {
begin += cname.length;
end = dc.indexOf(";", begin);
if (end == -1) end = dc.length;
return dc.substring(begin, end); //www.camnpr.com
}
}
return null;
}
Cookie.write = function (name, value) {
var expire = "";
var hours = 365;
expire = new Date((new Date()).getTime() + hours * 3600000);
expire = ";path=/;expires=" + expire.toGMTString();
document.cookie = name + "=" + value + expire;
}
var strKey = "strKey";
var storage = window.localStorage;
function onStart(){
if(storage.getItem(strKey)!=null){
alert(storage.getItem(strKey)+'localStorage');
}else if(Cookie.read(strKey)!=null){
alert(Cookie.read(strKey)+'cookie');
}
}
function bendihuancun(){
var strValue = document.getElementById("username").value;
if (storage) {
storage.setItem(strKey, strValue);
} else {
Cookie.write(strKey, strValue);
}
} //www.camnpr.com
</script>
</head>
<body onload="onStart()">
<input type="text" id="username" value="camnpr">
<input type="button" value="保存缓存" onclick="bendihuancun()">
</body>
</html>
本文链接：http://camnpr.com/archives/html5-window-localstorage.html
相关文章
- 高级浏览器添加离线提示：window.webkitNotifications 桌面通知Notification(2013-4-25 14:39:49)
- 收集23个web免费的图表、流程图工具(2013-4-7 10:48:29)
- IE9以下浏览器兼容HTML 5新标签(2013-3-28 15:10:20)
- 怎么判断浏览器是否支持HTML5 Canvas(2013-3-25 15:55:48)
- web标准—可用性、可维护性、可访问性(2012-8-16 13:44:27)
- HTML5语音搜索方法(2012-5-21 17:12:42)
- data类型的Url格式--url(data:image/gif;base64,AAAA)：把小数据(2011-11-4 15:14:2)
- 浏览器对HTML5的兼容性分析(2011-3-31 9:35:15)
- 2010年50个顶级CSS3教程(2010-12-30 10:17:38)
- 在线编写HTML5 和CSS 代码,现场看到效果(2010-12-14 11:33:19)
