【開源】封裝HTML5的localstorage

項目名：web-storage-cache

項目地址：https://github.com/WQTeam/web-storage-cache

API說明：https://github.com/WQTeam/web-storage-cache/blob/master/README_zh_CN.md

  

本人在前端時間作移動端開發想使用localstorage作數據的緩存。發現localstorage只是存儲簡單的string鍵值對。但實際使用中常常要配合JSON.parse 和 JSON.stringify, 在不少場景中又須要添加超時時間。看了一些開源的項目也對localstorage進行了封裝，但都沒有徹底複合工做中的業務場景的。因此本身寫了一個。

 不知道國內有沒有相似github這種活躍的社區，感受國內的開源氛圍都不強。

使用：

 

var wsCache = new WebStorageCache();

// 緩存字符串'wqteam' 到 'username' 中, 超時時間100秒
wsCache.set('username', 'wqteam', {exp : 100});

// 超時截止日期 2015 5 18
wsCache.set('username', 'wqteam', {exp : new Date('2015 5 18')});

// 獲取緩存中 'username' 的值
wsCache.get('username');

// 緩存簡單js對象，默認使用序列化方法爲JSON.stringify。能夠經過初始化wsCache的時候配置serializer.serialize
wsCache.set('user', { name: 'Wu', organization: 'wqteam'});

// 讀取緩存中的簡單js對象 - 默認使用反序列化方法爲JSON.parse。能夠經過初始化wsCache的時候配置serializer.deserialize
var user = wsCache.get('user');
alert(user.name + ' belongs to ' + user.organization);

// 刪除緩存中 'username'
wsCache.delete('username');

// 手工刪除全部超時CacheItem,
wsCache.deleteAllExpires();

// 清除客戶端中全部緩存
wsCache.clear();

// 爲已存在的（未超時的）緩存值設置新的超時時間。
wsCache.touch('username', 1);

// 若是緩存中沒有key爲username2的緩存，則添加username2。反之什麼都不作
wsCache.add('username2', 'wqteam', {exp : 1});

// 若是緩存中有key爲username的緩存，則替換爲新值。反之什麼都不作
wsCache.replace('username', 'new wqteam', {exp : 1});

// 檢查當前選擇做爲緩存的storage是否被用戶瀏覽器支持。
//若是不支持調用WebStorageCache API提供的方法將什麼都不作。
wsCache.isSupported();

　　

API

Constructor

var wsCache = new WebStorageCache({
    // [可選] 'localStorage', 'sessionStorage', window.localStorage, window.sessionStorage
    //        或者其餘實現了 [Storage API] 的storage實例.
    //        默認 'localStorage'.
    storage: 'localStorage',
    // [可選]  類型Number，公共超時事件設置。默認無限大
    exp: Infinity
});

　　

isSupported

檢查當前選擇做爲緩存的storage是否被用戶瀏覽器支持。 若是不支持調用WebStorageCache API提供的方法將什麼都不作。

wsCache.isSupported(); // 返回值Boolean。

　　

set

往緩存中插入數據。

// key [必填] 必需要爲String類型。
// value [必填] 支持因此能夠JSON.parse 的類型。注：當爲undefined的時候會執行 delete(key)操做。
// options [選填] js對象，包含兩個屬性 exp 和 force。
// {
//     // 類型Number。超時時間，秒。默認無限大。
//     exp: 100,
//     // 類型Boolean。爲true時：當超過最大容量致使沒法繼續插入數據操做時，先清空緩存中已超時的
//     // 內容後再嘗試插入數據操做。默認爲true。
//     force: true
// }
wsCache.set(key, value, options);

　　

get

根據key獲取緩存中未超時數據。返回相應類型String、Boolean、PlainObject、Array的值。

// key [必填] String類型。若是發現該key對應的值已過時,會進行delete(key)操做，返回null。
wsCache.get(key);

　　

delete

根據key刪除緩存中的值。

wsCache.delete(key);

　　

deleteAllExpires

刪除緩存中全部經過WebStorageCache存儲的超時值。

wsCache.deleteAllExpires();

　　

clear

清空緩存中所有的值。注意：這個方法會清除不是使用WebStorageCache插入的值。推薦使用:deleteAllExpires。

wsCache.clear();

　　

touch

根據key爲已存在的（未超時的）緩存值以當前時間爲基準設置新的超時時間。

// key [必填] String類型
// exp [必填] number 單位：秒 js對象包含exp屬性（以當前時間爲起點的新的超時時間）
wsCache.touch(key, exp: 1);

　　

add

根據key作插入操做，若是key對應的值不存在或者已超時則插入該值，反之什麼都不作。 注：不是經過WebStorageCache插入的值也會看成失效的值，依然執行add操做

wsCache.add(key, value, options);

　　

replace

根據key作插入操做，若是key對應的值存在而且未超時則插入該值，反之什麼都不作
注：超時時間以當前時間爲基準從新設置。

wsCache.replace(key, value, options);