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

留言

熱門文章