什么是HTML5存储？

简单地说，它是一种让web页面在浏览器端本地化存储键值对的方式。跟cookies一样，即使你从网站导航到别的网站，关掉了浏览器的tab页，退出了浏览器，数据依然存在；与cookies不同的是，数据绝不会被发送到远程服务器上。

示例：检测是否存在HTML5存储

自己编写代码

functionsupports_html5_storage() {try{return 'localStorage' in window && window['localStorage'] !== null;

}catch(e) {return false;

}

}

if(Modernizr.localstorage) {//window.localStorage is available!

} else{//no native support for HTML5 storage :(

//maybe try dojox.storage or a third-party solution

}

如何使用HTML5存储数据？

HTML5存储基于key/value对，依据key来存储数据，再依据key来取数据。

key：字符串类型。

value：任何JavaScript支持的类型，包括strings, Booleans, integers, floats。

然而value实际上是以字符串的形式存储的，所以如果你要存储任何string类型以外的数据，你需要使用 parseInt() 或 parseFloat() 函数来强制转化类型。

存储接口

Storage接口之 getItem(), setItem()

interface Storage {

getter any getItem(inDOMString key);

setter creatorvoid setItem(in DOMString key, inany data);

};

调用 setItem() 时使用已存在的key会覆盖之前value的内容，调用 getItem() 时使用不存在的key会返回null。

跟其他JavaScript对象一样，你可以把localStroage对象当作一个关联数组，使用方括号来替代 getItem() 与 setITem()：

var foo = localStorage.getItem("bar");//...

localStorage.setItem("bar", foo);

可以被替换成方括号语法：

var foo = localStorage["bar"];//...

localStorage["bar"] = foo;

Storage接口之 removeItem(), clear()

interface Storage {

deletervoid removeItem(inDOMString key);voidclear();

};

调用 removeItem() 时如果key不存在不会有任何效果。

Storage接口之 length属性，每个key的名称

interface Storage {

readonly attribute unsignedlonglength;

getter DOMString key(in unsigned longindex);

};

如果你调用 key() 但是index不在(0 - (length-1))的范围内，函数将返回null.

另外HTML最多支持5M本地存储，超出会引发“QUOTA_EXCEEDED_ERR”异常，且不能申请新的存储空间。

如何跟踪HTML5存储区的更改？

如果你想要用代码跟踪什么时候存储区域发生了改变，你可以捕获storage事件。无论是调用了setItem()，removeItem()还是clear()，只要发生了更改，storage事件就会被触发。

任何支持localStorage的地方都支持storage事件。也包括不支持W3C标准addEventListener的IE8。所以为了hook这个storage事件，需要检查浏览器支持什么事件机制。

捕获storage事件跟捕获其他事件一样，也可以用jQuery或其他JavaScript库来注册event handlers。

if(window.addEventListener) {

window.addEventListener("storage", handle_storage, false);

}else{

window.attachEvent("onstorage", handle_storage);

};

handle_storage回调函数将会被调用，并传入一个StorageEvent对象，除了IE的事件对象存储在 window.event 当中。

functionhandle_storage(e) {if (!e) { e =window.event; }

}

至此，变量e将会变成StorageEvent对象，并拥有以下有用的属性：

属性

类型

描述

key

string

添加、移除或修改的key的名称

oldValue

any

之前的值(现在已经被覆盖了)，如果是新添加的item则是null

newValue

any

新的值，如果是被移除则为null

url*/uri*

string

调用方法触发更改的页面

storage事件不能被取消。

HTML5实战

保存游戏状态：

functionsaveGameState() {if (!supportsLocalStorage()) { return false; }

localStorage["halma.game.in.progress"] =gGameInProgress;for (var i = 0; i < kNumPieces; i++) {

localStorage["halma.piece." + i + ".row"] =gPieces[i].row;

localStorage["halma.piece." + i + ".column"] =gPieces[i].column;

}

localStorage["halma.selectedpiece"] =gSelectedPieceIndex;

localStorage["halma.selectedpiecehasmoved"] =gSelectedPieceHasMoved;

localStorage["halma.movecount"] =gMoveCount;return true;

}

恢复游戏状态：

functionresumeGame() {if (!supportsLocalStorage()) { return false; }

gGameInProgress= (localStorage["halma.game.in.progress"] == "true");if (!gGameInProgress) { return false; }

gPieces= newArray(kNumPieces);for (var i = 0; i < kNumPieces; i++) {var row = parseInt(localStorage["halma.piece." + i + ".row"]);var column = parseInt(localStorage["halma.piece." + i + ".column"]);

gPieces[i]= newCell(row, column);

}

gNumPieces=kNumPieces;

gSelectedPieceIndex= parseInt(localStorage["halma.selectedpiece"]);

gSelectedPieceHasMoved= localStorage["halma.selectedpiecehasmoved"] == "true";

gMoveCount= parseInt(localStorage["halma.movecount"]);

drawBoard();return true;

}