什么是HTML5存儲？

簡單地說，它是一種讓web頁面在瀏覽器端本地化存儲鍵值對的方式。跟cookies一樣，即使你從網(wǎng)站導(dǎo)航到別的網(wǎng)站，關(guān)掉了瀏覽器的tab頁，退出了瀏覽器，數(shù)據(jù)依然存在；與cookies不同的是，數(shù)據(jù)絕不會被發(fā)送到遠程服務(wù)器上。

示例：檢測是否存在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存儲數(shù)據(jù)？

HTML5存儲基于key/value對，依據(jù)key來存儲數(shù)據(jù)，再依據(jù)key來取數(shù)據(jù)。

key：字符串類型。

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

然而value實際上是以字符串的形式存儲的，所以如果你要存儲任何string類型以外的數(shù)據(jù)，你需要使用 parseInt() 或 parseFloat() 函數(shù)來強制轉(zhuǎn)化類型。

存儲接口

Storage接口之 getItem(), setItem()

interface Storage {

getter any getItem(inDOMString key);

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

};

調(diào)用 setItem()?時使用已存在的key會覆蓋之前value的內(nèi)容，調(diào)用 getItem()?時使用不存在的key會返回null。

跟其他JavaScript對象一樣，你可以把localStroage對象當(dāng)作一個關(guān)聯(lián)數(shù)組，使用方括號來替代 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();

};

調(diào)用 removeItem()?時如果key不存在不會有任何效果。

Storage接口之 length屬性，每個key的名稱

interface Storage {

readonly attribute unsignedlonglength;

getter DOMString key(in unsigned longindex);

};

如果你調(diào)用?key() 但是index不在(0 - (length-1))的范圍內(nèi)，函數(shù)將返回null.

另外HTML最多支持5M本地存儲，超出會引發(fā)“QUOTA_EXCEEDED_ERR”異常，且不能申請新的存儲空間。

如何跟蹤HTML5存儲區(qū)的更改？

如果你想要用代碼跟蹤什么時候存儲區(qū)域發(fā)生了改變，你可以捕獲storage事件。無論是調(diào)用了setItem()，removeItem()還是clear()，只要發(fā)生了更改，storage事件就會被觸發(fā)。

任何支持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回調(diào)函數(shù)將會被調(diào)用，并傳入一個StorageEvent對象，除了IE的事件對象存儲在 window.event 當(dāng)中。

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

}

至此，變量e將會變成StorageEvent對象，并擁有以下有用的屬性：

屬性

類型

描述

key

string

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

oldValue

any

之前的值(現(xiàn)在已經(jīng)被覆蓋了)，如果是新添加的item則是null

newValue

any

新的值，如果是被移除則為null

url*/uri*

string

調(diào)用方法觸發(fā)更改的頁面

storage事件不能被取消。

HTML5實戰(zhàn)

保存游戲狀態(tài)：

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;

}

恢復(fù)游戲狀態(tài)：

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;

}

總結(jié)

以上是生活随笔為你收集整理的html5 本地批量存储,HTML5本地存储的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。