資訊專欄INFORMATION COLUMN
摘要：是一個(gè)實(shí)現(xiàn)了瀏覽器的本地存儲(chǔ)的封裝，不是通過和技術(shù)實(shí)現(xiàn)，而是使用。小弟我主要是用于，，手機(jī)等先進(jìn)瀏覽器里面跑。
store.js 是一個(gè)實(shí)現(xiàn)了瀏覽器的本地存儲(chǔ)的 JavaScript 封裝 API，不是通過 Cookie 和 Flash 技術(shù)實(shí)現(xiàn)，而是使用 localStorage。小弟我主要是用于chrome，Safari，手機(jī)Web等先進(jìn)瀏覽器里面跑。so....大家可以做兼容哦....
比較詭異的是居然所有支持的瀏覽器目前都采用的5MB，盡管有一些瀏覽器可以讓用戶設(shè)置，但對(duì)于網(wǎng)頁制作者來說，目前的形勢(shì)就5MB來考慮是比較妥當(dāng)?shù)摹?/p>
Github地址
安裝 bower$ bower install storejsnpm
$ npm install storejs本地存儲(chǔ)APIs
jsstore(key, data); //單個(gè)存儲(chǔ)字符串?dāng)?shù)據(jù)
store({key: data, key2: data2}); //批量存儲(chǔ)多個(gè)字符串?dāng)?shù)據(jù)
store(key); //獲取key的字符串?dāng)?shù)據(jù)
store(); //獲取所有key/data
//store(false);（棄用） //因?yàn)閭魅肟罩?或者報(bào)錯(cuò)很容易清空庫
store(key,false); //刪除key包括key的字符串?dāng)?shù)據(jù)
store.set(key, data[, overwrite]);//=== store(key, data);
store.setAll(data[, overwrite]); //=== store({key: data, key2: data});
store.get(key[, alt]); //=== store(key);
store.getAll(); //=== store();
store.remove(key); //===store(key,false)
store.clear(); //清空所有key/data
store.keys(); //返回所有key的數(shù)組
store.forEach(callback); //循環(huán)遍歷，返回false結(jié)束遍歷
store.has(key); //?判斷是否存在返回true/false
//? 提供callback方法處理數(shù)據(jù)
store("test",function(arr){
console.log(arr)//這里處理 通過test獲取的數(shù)據(jù)
return [3,4,5]//返回?cái)?shù)據(jù)并存儲(chǔ)
})
store(["key","key2"],function(arr){
//獲取多個(gè)key的數(shù)據(jù)處理，return 并保存；
console.log("arr:",arr)
return "逐個(gè)更改數(shù)據(jù)"
})
set
單個(gè)存儲(chǔ)或刪除字符串?dāng)?shù)據(jù)
store.set(key, data[, overwrite]);
效果相同store(key, data);
jsstore.set("wcj","1") //? 1
store.set("wcj") //? 刪除wcj及字符串?dāng)?shù)據(jù)
setAll
批量存儲(chǔ)多個(gè)字符串?dāng)?shù)據(jù)
store.setAll(data[, overwrite])
效果相同store({key: data, key2: data});
jsstore.setAll({
"wcj1":123,
"wcj2":345
}) //存儲(chǔ)兩條字符串?dāng)?shù)據(jù)
store.setAll(["w1","w2","w3"])
//存儲(chǔ)三條字符串?dāng)?shù)據(jù)
// 0? "w1"
// 1? "w2"
// 2? "w3"
get
獲取key的字符串?dāng)?shù)據(jù)
store.get(key[, alt])
效果相同store(key)
jsstore.get("wcj1") //獲取wcj1的字符串?dāng)?shù)據(jù)
store("wcj1") //功能同上
getAll
獲取所有key/data
store.getAll()
效果相同store()
jsstore.getAll() //?JSON store() //功能同上clear
清空所有key/data
store.clear()
棄用 ~~store(false)~~ 因?yàn)閭魅肟罩?或者報(bào)錯(cuò)很容易清空庫
jsstore.clear() //keys
返回所有key的數(shù)組
store.keys()
jsstore.keys() //?["w1", "w2", "w3"]has
判斷是否存在返回true/false
store.has(key)
jsstore.has("w1"); //?true
remove
刪除key包括key的字符串?dāng)?shù)據(jù)
store.remove(key)
jsstore.remove("w1"); //刪除w1 返回 w1的value
store("w1",false) //這樣也是 刪除w1
forEach
循環(huán)遍歷，返回false結(jié)束遍歷
jsstore.forEach(function(k,d){
console.log(k,d)
if (k== 3) return false
})
定時(shí)清除
(做個(gè)筆記，未來將定時(shí)清除封裝起來，有思路)
jsif (+new Date() > +new Date(2014, 11, 30)) {
localStorage.removeItem("c"); //清除c的值
// or localStorage.clear();
}
storage事件
HTML5的本地存儲(chǔ)，還提供了一個(gè)storage事件，可以對(duì)鍵值對(duì)的改變進(jìn)行監(jiān)聽，使用方法如下：
jsif(window.addEventListener){
window.addEventListener("storage",handle_storage,false);
}else if(window.attachEvent){
window.attachEvent("onstorage",handle_storage);
}
function handle_storage(e){
if(!e){e=window.event;}
//showStorage();
}
對(duì)于事件變量e，是一個(gè)StorageEvent對(duì)象，提供了一些實(shí)用的屬性，可以很好的觀察鍵值對(duì)的變化，如下表：
| Property | Type | Description |
|---|---|---|
| key | String | The named key that was added, removed, or moddified |
| oldValue | Any | The previous value(now overwritten), or null if a new item was added |
| newValue | Any | The new value, or null if an item was added |
| url/uri | String | The page that called the method that triggered this change |
來源：sessionStorage localStorage
| 特性 | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) | iPhone(IOS) | Android | Opera Mobile | Window Phone |
|---|---|---|---|---|---|---|---|---|---|
| localStorage | 4+ | 3.5+ | 8+ | 10.50+ | 4+ | 3.2+ | 2.1+ | 11+ | 8+ |
| sessionStorage | 5+ | 2+ | 8+ | 10.50+ | 4+ | 3.2+ | 2.1+ | 11+ | 8+ |
JSON.stringify(localStorage).length 當(dāng)前占用多大容量
檢測(cè)localstore容量上限
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/87690.html
摘要：存儲(chǔ)之初探的發(fā)布和定稿為前端界帶來巨大的變化，新增的和特性給業(yè)務(wù)帶來了更多可能性，讓用戶體驗(yàn)擁有了更可能的豐富。只讀返回一個(gè)整數(shù)，表示存儲(chǔ)在對(duì)象中的數(shù)據(jù)項(xiàng)數(shù)量。會(huì)在過期時(shí)間之后銷毀。安全性方面，中一般不建議存儲(chǔ)敏感信息。 Web存儲(chǔ)之LocalStorage初探 HTML5的發(fā)布和定稿為前端界帶來巨大的變化，新增的API和特性給業(yè)務(wù)帶來了更多可能性，讓用戶體驗(yàn)擁有了更可能的豐富。 · ...
摘要：于是一個(gè)擁有版本控制和過期控制的本地內(nèi)容存儲(chǔ)功能模塊就算初步完成了。最后基于這個(gè)事情的考慮，于是順便寫了個(gè)本地存儲(chǔ)控制的庫，基本都在上面了 前言 關(guān)于localStorage sessionStorage之類的api怎么用已經(jīng)無需我再贅述了，但是具體怎么落實(shí)到一個(gè)稍微復(fù)雜一些的業(yè)務(wù)中還是需要做一些前期的準(zhǔn)備 遇見的一些問題 1.localStorage 與 sessionStorage...
摘要：于是一個(gè)擁有版本控制和過期控制的本地內(nèi)容存儲(chǔ)功能模塊就算初步完成了。最后基于這個(gè)事情的考慮，于是順便寫了個(gè)本地存儲(chǔ)控制的庫，基本都在上面了 前言 關(guān)于localStorage sessionStorage之類的api怎么用已經(jīng)無需我再贅述了，但是具體怎么落實(shí)到一個(gè)稍微復(fù)雜一些的業(yè)務(wù)中還是需要做一些前期的準(zhǔn)備 遇見的一些問題 1.localStorage 與 sessionStorage...
閱讀 1322·2021-09-22 15:09
閱讀 2656·2021-08-20 09:38
閱讀 2402·2021-08-03 14:03
閱讀 863·2019-08-30 15:55
閱讀 3368·2019-08-30 12:59
閱讀 3551·2019-08-26 13:48
閱讀 1886·2019-08-26 11:40
閱讀 647·2019-08-26 10:30
