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)文章
這篇文章主要介紹了微信瀏覽器下拉黑邊解決方案 wScroollFix,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-01-01
JS獲取當(dāng)前日期 YYYY-MM-DD hh-mm-ss的示例代碼
在編寫(xiě)JavaScript代碼時(shí),遇到需要獲取當(dāng)前日期和時(shí)間并將其格式化為 yyyymmddhhmmss 字符串的情況,可以使用本文中介紹的幾種實(shí)現(xiàn)方式中的任意一種,2024-02-02
JS響應(yīng)鼠標(biāo)點(diǎn)擊實(shí)現(xiàn)兩個(gè)滑塊區(qū)間拖動(dòng)效果
這篇文章主要介紹了JS實(shí)現(xiàn)的兩個(gè)滑塊區(qū)間拖動(dòng)效果代碼,涉及JavaScript響應(yīng)鼠標(biāo)事件針對(duì)頁(yè)面元素的動(dòng)態(tài)操作技巧,需要的朋友可以參考下2015-10-10
前端canvas實(shí)現(xiàn)電子簽約完成線上簽署功能
最近發(fā)現(xiàn)現(xiàn)在租房還是簽合同,越來(lái)越多采用電子簽約的方式進(jìn)行,好處不用多說(shuō)節(jié)約成本,節(jié)約時(shí)間,下面我們來(lái)看看使用canvas實(shí)現(xiàn)電子簽約完成線上簽署功能2025-01-01
Javascript實(shí)現(xiàn)帶關(guān)閉按鈕的網(wǎng)頁(yè)漂浮廣告代碼
帶有關(guān)閉功能的漂浮圖片的實(shí)現(xiàn)方法有很多，下面為大家介紹下使用Javascript是如何實(shí)現(xiàn)的，喜歡的額朋友可以了解下2014-01-01
使用JavaScript獲取掃碼槍掃描得到的條形碼的思路代碼詳解
這篇文章主要介紹了使用JavaScript獲取掃碼槍掃描得到的條形碼的思路代碼詳解,本文通過(guò)示例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-06-06
BootStrap下的彈出框加載select2框架失敗的解決方法
本文通過(guò)簡(jiǎn)單的代碼給大家介紹了BootStrap下的彈出框加載select2框架失敗的解決方法，需要的朋友參考下吧2017-08-08
js實(shí)現(xiàn)圓形顯示鼠標(biāo)單擊位置
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)圓形顯示鼠標(biāo)單擊位置，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-02-02
這篇文章主要為大家詳細(xì)介紹了Javascript和jQuery的深淺拷貝，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-02-02
通過(guò)JS判斷網(wǎng)頁(yè)是否為手機(jī)打開(kāi)
這篇文章主要介紹了通過(guò)JS判斷網(wǎng)頁(yè)是否為手機(jī)打開(kāi),文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-10-10