wStorage 使用說明
wStorage object主要是讓我更簡單的去存取WebStorage。為什麼我要寫這個呢?
主要是在10月份我去參加Yahoo Open Hack Taiwan 2012的比賽中,我為了寫一
個Web App (http://www.2molab.com/y/) 為了將使用者自己選的服務留下來,然後
服務就會像是圖片的方式留在主畫面中,當然使用者不管怎麼重新刷新頁面或是
重開服務的話,我希望這些服務都不會不見,所以必須要使用到WebStorage的
localStorage來幫我實現這個想法。
wStorage非常容易使用也比較直覺,以下我寫個範例來說明他如何使用:
1. 首先先選擇要用local或是session的Storage,接著就建立wStorage的Instance
var options = {
storage : 'local', // choice session or local storage
};
var ws = new wStorage(options);
2. 確定WebStorage有沒有支援
if(ws.support()){ ..... }
3. 加入資料,你可以加入你要的資料像是String, Array或是Object都可以
ws.add('ws',"my"); // add string
ws.add('data_array',data_array); // add array
ws.add('obj',ws); // add object
4. 找出資料,我寫了兩個方式一個是一次讀一個,另一個就是全部都讀出來
至於我是用callback function的方式來處理資料,避免資料量太大時程式會Block
ws.find('ws',function(data){
console.log(data);
})
ws.find('data_array',function(data){
data_array1 = data;
console.log(data_array1);
})
ws.find('obj',function(data){
ws1 = data;
console.log(ws1);
})
ws.find_all(function(key,data){
console.log("find all from storage");
console.log(key+":"+data);
console.log(typeof key);
});
5. 刪除特定資料
ws.del('obj');
6. 使用destroy這個要小心,他會將整個資料全刪掉
ws.destroy();
7. 結論
寫這個真的只是覺得原本WebStorage所提供的API每這麼好用,所以想說自己寫一個
我也不確定是不是有人寫過相同的功能,如果有任何意見或是任何想法,希望能跟我
講,讓我把wStorage改的更好用。
https://github.com/CarterTsai/wStorage
留言