本地存储localStorage的封装,提供简单的API
发布在JSLite.io2015年4月17日view:4077开源项目前端开发XmgvzgrkES6BrettBat移动开发
在文章任何区域双击击即可给文章添加【评注】!浮到评注点上可以查看详情。

GitHub issues GitHub forks GitHub stars

store.js 是一个实现了浏览器的本地存储的 JavaScript 封装 API,不是通过 Cookie 和 Flash 技术实现,而是使用 localStorage。小弟我主要是用于chrome,Safari,手机Web等先进浏览器里面跑。so….大家可以做兼容哦….

比较诡异的是居然所有支持的浏览器目前都采用的5MB,尽管有一些浏览器可以让用户设置,但对于网页制作者来说,目前的形势就5MB来考虑是比较妥当的。

enter image description here

Github地址

本地存储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/data
store.getAll()
效果相同store()

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

clear

清空所有key/data
store.clear()
效果相同store(false)

store.clear() //
store(false)  //功能同上

keys

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

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

has

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

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

remove

删除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
评论
发表评论
2年前
赞了此文章!
2年前
赞了此文章!
3年前
添加了一枚【评注】:mark一下
3年前

@任寂寞丶嬉笑 哥玩儿坏了

3年前
添加了一枚【评注】:啊
3年前
添加了一枚【评注】:不过不能查看评论的么
3年前
添加了一枚【评注】:哈哈,这个功能确实棒
WRITTEN BY
小弟调调
前端开发工程师,JSLite.io求关注,求star。
TA的新浪微博
PUBLISHED IN
JSLite.io

官网:JSLite.io。JSLite 是一个 JavaScript 库,与 jQuery 有着类似的 API,通用库只有 5-10k,让 Web 开发更迅速,下载执行更快、量级更轻只针对先进浏览器(支持HTML5、CSS3)移动端浏览器编写的 JavaScript 库。与jQuery有着类似的api,模仿jQuery的语法规范,并不是100%的覆盖。如果你会用jQuery,那么你也会用JSLite。

推进前端开发标准对于攻城师来说,人人有责。

我的收藏