标签：
摘自 http://diveintohtml5.info/storage.html
简单地说，它是一种让web页面在浏览器端本地化存储键值对的方式。跟cookies一样，即使你从网站导航到别的网站，关掉了浏览器的tab页，退出了浏览器，数据依然存在；与cookies不同的是，数据绝不会被发送到远程服务器上。
示例：检测是否存在HTML5存储
自己编写代码
function supports_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存储基于key/value对，依据key来存储数据，再依据key来取数据。
然而value实际上是以字符串的形式存储的，所以如果你要存储任何string类型以为的数据，你需要使用 parseInt() 或 parseFloat() 函数来强制转化类型。
存储接口
Storage接口之 getItem(), setItem()
interface Storage { getter any getItem(in DOMString key); setter creator void setItem(in DOMString key, in any 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 { deleter void removeItem(in DOMString key); void clear(); };
调用 removeItem() 时如果key不存在不会有任何效果。
Storage接口之 length属性，每个key的名称
interface Storage { readonly attribute unsigned long length; getter DOMString key(in unsigned long index); };
如果你调用 key() 但是index不在(0 - (length-1))的范围内，函数将返回null.
另外HTML最多支持5M本地存储，超出会引发“QUOTA_EXCEEDED_ERR”异常，且不能申请新的存储空间。
如果你想要用代码跟踪什么时候存储区域发生了改变，你可以捕获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 当中。
function handle_storage(e) { if (!e) { e = window.event; } }
至此，变量e将会变成StorageEvent对象，并拥有以下有用的属性：
| 属性 | 类型 | 描述 |
| key | string | 添加、移除或修改的key的名称 |
| oldValue | any | 之前的值（现在已经被覆盖了），如果是新添加的item则是null |
| newValue | any | 新的值，如果是被移除则为null |
| url*/uri* | string | 调用方法触发更改的页面 |
storage事件不能被取消。
保存游戏状态：
function saveGameState() { 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; }
恢复游戏状态：
function resumeGame() { if (!supportsLocalStorage()) { return false; } gGameInProgress = (localStorage["halma.game.in.progress"] == "true"); if (!gGameInProgress) { return false; } gPieces = new Array(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] = new Cell(row, column); } gNumPieces = kNumPieces; gSelectedPieceIndex = parseInt(localStorage["halma.selectedpiece"]); gSelectedPieceHasMoved = localStorage["halma.selectedpiecehasmoved"] == "true"; gMoveCount = parseInt(localStorage["halma.movecount"]); drawBoard(); return true; }
标签：
原文地址：http://www.cnblogs.com/femaleprogramer/p/4494060.html
