store.js 是一个实现了浏览器的本地存储的 JavaScript 封装 API,不是通过 Cookie 和 Flash 技术实现,而是使用 localStorage。小弟我主要是用于chrome,Safari,手机Web等先进浏览器里面跑。so….大家可以做兼容哦….
比较诡异的是居然所有支持的浏览器目前都采用的5MB,尽管有一些浏览器可以让用户设置,但对于网页制作者来说,目前的形势就5MB来考虑是比较妥当的。
下载
bower
$ bower install storejs
npm
$ npm install storejs
本地存储APIs
store(key, data); //单个存储字符串数据
store({key: data, key2: data2}); //批量存储多个字符串数据
store(key); //获取key的字符串数据
store(); //获取所有key/data
store(false); //清空所有key/data
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.clear(); //=== store(false);
store.remove(key); //===store(key,false)
store.keys(); //返回所有key的数组
store.forEach(callback); //循环遍历,返回false结束遍历
store.has(key); //⇒判断是否存在返回true/false
set
单个存储或删除字符串数据
store.set(key, data[, overwrite]);
效果相同store(key, data);
store.set("wcj","1") //⇒ 1
store.set("wcj") //⇒ 删除wcj及字符串数据
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"
get
获取key的字符串数据store.get(key[, alt])
效果相同store(key)
store.get("wcj1") //获取wcj1的字符串数据
store("wcj1") //功能同上
getAll
获取所有key/datastore.getAll()
效果相同store()
store.getAll() //⇒JSON
store() //功能同上
清空所有key/datastore.clear()
效果相同store(false)
store.clear() //
store(false) //功能同上
keys
返回所有key的数组store.keys()
store.keys() //⇒["w1", "w2", "w3"]
has
判断是否存在返回true/falsestore.has(key)
store.has("w1"); //⇒true
删除key包括key的字符串数据store.remove(key)
store.remove("w1"); //删除w1 返回 w1的value
store("w1",false) //这样也是 删除w1
forEach
循环遍历,返回false结束遍历
store.forEach(function(k,d){
console.log(k,d)
if (k== 3) return false
})
定时清除
(做个笔记,未来将定时清除封装起来,有思路)
if (+new Date() > +new Date(2014, 11, 30)) {
localStorage.removeItem("c"); //清除c的值
// or localStorage.clear();
}
storage事件
HTML5的本地存储,还提供了一个storage事件,可以对键值对的改变进行监听,使用方法如下:
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();
}
对于事件变量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 |
兼容
特性 | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
---|---|---|---|---|---|
localStorage | 4 | 3.5 | 8 | 10.50 | 4 |
sessionStorage | 5 | 2 | 8 | 10.50 | 4 |
本地存储大小
JSON.stringify(localStorage).length
当前占用多大容量