本地存儲localStorage的封裝，提供簡單的API

時間 2020-01-06

標籤本地存儲 localstorage 封裝提供簡單 api 欄目軟件設計简体版

原文原文鏈接

store.js 是一個實現了瀏覽器的本地存儲的 JavaScript 封裝 API，不是經過 Cookie 和 Flash 技術實現，而是使用 localStorage。小弟我主要是用於chrome，Safari，手機Web等先進瀏覽器裏面跑。so....你們能夠作兼容哦....html

比較詭異的是竟然全部支持的瀏覽器目前都採用的5MB，儘管有一些瀏覽器能夠讓用戶設置，但對於網頁製做者來講，目前的形勢就5MB來考慮是比較穩當的。git

Github地址github

安裝

bower

$ bower install storejs

npm

$ npm install storejs

本地存儲APIs

jsstore(key, data);                 //單個存儲字符串數據
store({key: data, key2: data2});  //批量存儲多個字符串數據
store(key);                       //獲取key的字符串數據
store();                          //獲取全部key/data
//store(false);（棄用）          //由於傳入空值 或者報錯很容易清空庫
store(key,false);                 //刪除key包括key的字符串數據

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的數組
store.forEach(callback);          //循環遍歷，返回false結束遍歷

store.has(key);         //⇒判斷是否存在返回true/false          


//⇒ 提供callback方法處理數據
store("test",function(arr){
    console.log(arr)//這裏處理 經過test獲取的數據
    return [3,4,5]//返回數據並存儲
})

store(["key","key2"],function(arr){
    //獲取多個key的數據處理，return 並保存；
    console.log("arr:",arr)
    return "逐個更改數據"
})

set

單個存儲或刪除字符串數據
store.set(key, data[, overwrite]);
效果相同store(key, data);chrome

jsstore.set("wcj","1")   //⇒  1
store.set("wcj")       //⇒  刪除wcj及字符串數據

setAll

批量存儲多個字符串數據
store.setAll(data[, overwrite])
效果相同store({key: data, key2: data});npm

jsstore.setAll({
    "wcj1":123,
    "wcj2":345
}) //存儲兩條字符串數據

store.setAll(["w1","w2","w3"]) 
//存儲三條字符串數據 
//  0⇒ "w1"
//  1⇒ "w2"
//  2⇒ "w3"

get

獲取key的字符串數據
store.get(key[, alt])
效果相同store(key)數組

jsstore.get("wcj1") //獲取wcj1的字符串數據
store("wcj1") //功能同上

getAll

獲取全部key/data
store.getAll()
效果相同store()瀏覽器

jsstore.getAll() //⇒JSON
store() //功能同上

clear

清空全部key/data
store.clear()session

棄用 ~~store(false)~~ 由於傳入空值或者報錯很容易清空庫svg

jsstore.clear() //

keys

返回全部key的數組
store.keys()this

jsstore.keys() //⇒["w1", "w2", "w3"]

has

判斷是否存在返回true/false
store.has(key)

jsstore.has("w1"); //⇒true

remove

刪除key包括key的字符串數據
store.remove(key)

jsstore.remove("w1"); //刪除w1 返回 w1的value

store("w1",false) //這樣也是 刪除w1

forEach

循環遍歷，返回false結束遍歷

jsstore.forEach(function(k,d){
    console.log(k,d)
    if (k== 3) return false
})

定時清除

(作個筆記，將來將定時清除封裝起來，有思路)

jsif (+new Date() > +new Date(2014, 11, 30)) {
    localStorage.removeItem("c");    //清除c的值
    // or localStorage.clear();
}

storage事件

HTML5的本地存儲，還提供了一個storage事件，能夠對鍵值對的改變進行監聽，使用方法以下：

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();
}

對於事件變量e，是一個StorageEvent對象，提供了一些實用的屬性，能夠很好的觀察鍵值對的變化，以下表：

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