在客戶端儲存資料時,我們一般都用cookie(不敏感資料),但是在客戶端越來越富的今天,cookie可儲存的量(每個網域最大4k)實在是小。
在HTML5中有localStorage可以使用,但這就拋棄了IE8-。為了相容,我們可以翻出IE很久以前就搞的一個儲存方法:
為一個元素添加一個特殊的樣式url(#default#userData),之後就可以透過setAttribute和getAttribute來存取鍵值對形式的數據了。
要注意的一點就是在資料改變後要使用save方法,而資料載入初期要load。
接下來就貼上使用方法,當使用的瀏覽器支援HTML5時,就使用localStorage。
var localStorage = (function(db) {
if (typeof db.clear == "function") {
return db;
}
var database = document.createElement("div")
database.id = "database";
database.style.behavior = "url(#default#userData)";
document.body.appendChild(database);
database.load("DataStore");
return {
setItem : function(key, val) {
database.setAttribute(key, val);
database.save("DataStore");
}
, getItem: function(key) {
return database.getAttribute(key);
}
, removeItem: function(key) {
database.removeAttribute(key);
database.save("DataStore"); 🎜>};
} (localStorage || {}));
不過就算兼容了還是會有問題存在,例如在IE上存儲的信息,透過Chrome打開時就獲取不到了。