摘要:是一个实现了浏览器的本地存储的封装,不是通过和技术实现,而是使用。小弟我主要是用于,,手机等先进浏览器里面跑。
store.js 是一个实现了浏览器的本地存储的 JavaScript 封装 API,不是通过 Cookie 和 Flash 技术实现,而是使用 localStorage。小弟我主要是用于chrome,Safari,手机Web等先进浏览器里面跑。so....大家可以做兼容哦....
比较诡异的是居然所有支持的浏览器目前都采用的5MB,尽管有一些浏览器可以让用户设置,但对于网页制作者来说,目前的形势就5MB来考虑是比较妥当的。
Github地址
安装 bower$ bower install storejsnpm
$ 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);
jsstore.set("wcj","1") //⇒ 1 store.set("wcj") //⇒ 删除wcj及字符串数据setAll
批量存储多个字符串数据
store.setAll(data[, overwrite])
效果相同store({key: data, key2: data});
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()
弃用 ~~store(false)~~ 因为传入空值 或者报错很容易清空库
jsstore.clear() //keys
返回所有key的数组
store.keys()
jsstore.keys() //⇒["w1", "w2", "w3"]has
判断是否存在返回true/false
store.has(key)
jsstore.has("w1"); //⇒trueremove
删除key包括key的字符串数据
store.remove(key)
jsstore.remove("w1"); //删除w1 返回 w1的value store("w1",false) //这样也是 删除w1forEach
循环遍历,返回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 |
来源:sessionStorage localStorage
特性 | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) | iPhone(IOS) | Android | Opera Mobile | Window Phone |
---|---|---|---|---|---|---|---|---|---|
localStorage | 4+ | 3.5+ | 8+ | 10.50+ | 4+ | 3.2+ | 2.1+ | 11+ | 8+ |
sessionStorage | 5+ | 2+ | 8+ | 10.50+ | 4+ | 3.2+ | 2.1+ | 11+ | 8+ |
JSON.stringify(localStorage).length 当前占用多大容量
检测localstore容量上限
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/87690.html
摘要:存储之初探的发布和定稿为前端界带来巨大的变化,新增的和特性给业务带来了更多可能性,让用户体验拥有了更可能的丰富。只读返回一个整数,表示存储在对象中的数据项数量。会在过期时间之后销毁。安全性方面,中一般不建议存储敏感信息。 Web存储之LocalStorage初探 HTML5的发布和定稿为前端界带来巨大的变化,新增的API和特性给业务带来了更多可能性,让用户体验拥有了更可能的丰富。 · ...
摘要:于是一个拥有版本控制和过期控制的本地内容存储功能模块就算初步完成了。最后基于这个事情的考虑,于是顺便写了个本地存储控制的库,基本都在上面了 前言 关于localStorage sessionStorage之类的api怎么用已经无需我再赘述了,但是具体怎么落实到一个稍微复杂一些的业务中还是需要做一些前期的准备 遇见的一些问题 1.localStorage 与 sessionStorage...
摘要:于是一个拥有版本控制和过期控制的本地内容存储功能模块就算初步完成了。最后基于这个事情的考虑,于是顺便写了个本地存储控制的库,基本都在上面了 前言 关于localStorage sessionStorage之类的api怎么用已经无需我再赘述了,但是具体怎么落实到一个稍微复杂一些的业务中还是需要做一些前期的准备 遇见的一些问题 1.localStorage 与 sessionStorage...
阅读 1262·2021-09-22 15:09
阅读 2589·2021-08-20 09:38
阅读 2385·2021-08-03 14:03
阅读 841·2019-08-30 15:55
阅读 3353·2019-08-30 12:59
阅读 3531·2019-08-26 13:48
阅读 1868·2019-08-26 11:40
阅读 612·2019-08-26 10:30