web基于瀏覽器的本地存儲方法應(yīng)用
更新時間：2012年11月27日 15:24:48 作者：
在客戶端存儲數(shù)據(jù)時，我們一般都用cookie(不敏感數(shù)據(jù))，但是在客戶端越來越富的今天，cookie可存儲的量(每個域最大4k)實在是小,已經(jīng)滿足不了我們的需求
在客戶端存儲數(shù)據(jù)時，我們一般都用cookie(不敏感數(shù)據(jù))，但是在客戶端越來越富的今天，cookie可存儲的量(每個域最大4k)實在是小。
在HTML5中有l(wèi)ocalStorage可使用，但是這就拋棄了IE8-。為了兼容，我們可以翻出IE很久以前就搞的一個存儲方法：
給一個元素添加一個特殊的樣式url(#default#userData)，之后就可以通過setAttribute和getAttribute來存取鍵值對形式的數(shù)據(jù)了。
要注意的一點就是在數(shù)據(jù)改變后要使用save方法，而數(shù)據(jù)加載初期要load。
接下來就貼上使用方法，當(dāng)使用的瀏覽器支持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打開時就獲取不到了。
在HTML5中有l(wèi)ocalStorage可使用，但是這就拋棄了IE8-。為了兼容，我們可以翻出IE很久以前就搞的一個存儲方法：
給一個元素添加一個特殊的樣式url(#default#userData)，之后就可以通過setAttribute和getAttribute來存取鍵值對形式的數(shù)據(jù)了。
要注意的一點就是在數(shù)據(jù)改變后要使用save方法，而數(shù)據(jù)加載初期要load。
接下來就貼上使用方法，當(dāng)使用的瀏覽器支持HTML5時，就使用localStorage。
復(fù)制代碼 代碼如下:
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打開時就獲取不到了。
相關(guān)文章
JS highcharts實現(xiàn)動態(tài)曲線代碼示例
這篇文章主要介紹了JS highcharts實現(xiàn)動態(tài)曲線代碼示例,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-10-10
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)聯(lián)動菜單，左右側(cè)菜單效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09
在js里用到數(shù)組,比如 多個名字相同的input, 若是動態(tài)生成的, 提交時就需要判斷其是否是數(shù)組.2008-12-12
這篇文章介紹了js 表單提交后按鈕變灰的實例代碼，有需要的朋友可以參考一下2013-08-08
本文主要介紹了微信小程序視圖層莫名出現(xiàn)豎線的解決方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-07-07
JS中將圖片base64轉(zhuǎn)file文件的兩種方式
這篇文章主要介紹了JS中圖片base64轉(zhuǎn)file文件的兩種方式,實現(xiàn)把圖片的base64編碼轉(zhuǎn)成file文件的功能，然后再上傳至服務(wù)器，本文結(jié)合實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-02-02
Javascript 各瀏覽器的 Javascript 效率對比
2008-01-01
JavaScript中全局變量、函數(shù)內(nèi)變量以及常量表達式的效率測試
直接用字符串常量要比利用全局變量快，但創(chuàng)建正則表達式就比起用全局變量要慢上很多了。2009-11-11
這篇文章主要介紹了js實現(xiàn)Select下拉框具有輸入功能的方法,實例分析了兩種比較常見的實現(xiàn)方法,是非常實用的技巧,需要的朋友可以參考下2015-02-02
如何在JavaScript中等分?jǐn)?shù)組的實現(xiàn)
這篇文章主要介紹了如何在JavaScript中等分?jǐn)?shù)組的實現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-12-12