localstore介绍

store.js 是一个实现了浏览器的本地存储的 JavaScript 封装 API,不是通过 Cookie 和 Flash 技术实现,而是使用 localStorage。

bower
$ bower install storejs

npm
$ npm install storejs

生成压缩文件和开发模式
$ npm run build # 生成带UMD的js原文件 以及 min.js
$ npm run watch # 监听文件改变自动压缩生成js

本地存储APIs

1
store(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          
`

1
//⇒ 提供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 "逐个更改数据"
})

// 即创建/更新/删除数据项时,触发该事件
store.onStorage(function(key,val){
    console.log('onStorage:',key,val)
})
1
set
单个存储或删除字符串数据
 store.set(key, data[, overwrite]);
 效果相同 store(key, data);  

store.set("wcj","1")   //⇒  1
store.set("wcj")       //⇒  删除wcj及字符串数据
1
setAll
批量存储多个字符串数据
 store.setAll(data[, overwrite])
 效果相同 store({key: data, key2: data});  

store.setAll({
    "wcj1":123,
    "wcj2":345
}) //存储两条字符串数据

store.setAll(["w1","w2","w3"])
//存储三条字符串数据
//  0⇒ "w1"
//  1⇒ "w2"
//  2⇒ "w3"
1
get
获取key的字符串数据
store.get(key[, alt])
效果相同 store(key)  

store.get("wcj1") //获取wcj1的字符串数据
store("wcj1") //功能同上
1
getAll
获取所有key/data
 store.getAll()
 效果相同 store()  

store.getAll() //⇒JSON
store() //功能同上
1
clear
清空所有key/data
 store.clear()  

弃用 store(false) 因为传入空值 或者报错很容易清空库

store.clear() //
1
keys
返回所有key的数组
 store.keys()  

store.keys() //⇒["w1", "w2", "w3"]
1
has
判断是否存在返回true/false
 store.has(key)  

store.has("w1"); //⇒true
1
remove
删除key包括key的字符串数据  store.remove(key)

store.remove("w1"); //删除w1 返回 w1的value

store("w1",false) //这样也是 删除w1
1
forEach
循环遍历,返回false结束遍历

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

定时清除

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

storage事件
不知为毛不支持参看下面 onStorage =>HTML5的本地存储,还提供了一个storage事件,可以对键值对的改变进行监听,使用方法如下:

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

onStorage
即创建/更新/删除数据项时,触发该事件

1
store.onStorage(function(type,key,val){
   console.log("event:",type,key,val)
})

store({"a":1,"v":undefined})
//⇒ event: set a 1
//⇒ event: remove v

链式书写

1
store.set('ad',234).get('ad')

store.onStorage(function(type){
 console.log('type:',type)
}).set('wcj',12).clear().setAll({"a":1,b:2}).get('wcj')
//⇒ type: set
//⇒ type: clear
//⇒ type: set

本地存储大小

1
JSON.stringify(localStorage).length  当前占用多大容量