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