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
本地存储APIs1
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 当前占用多大容量