用于浏览器本地存储的js插件 - jStorage
简介
jStorage是一个跨浏览器的将key-value类型的数据存储到浏览器本地存储的js插件——jStorage支持所有主流浏览器,PC机(甚至包括是IE6)和移动终端均可用。此外,jStorage的实现不依赖任何其它js库(库无关),它和其他js库(Query, Prototype, MooTools等)有良好的兼容性。但是为了让它能够支持老版本的IE(比如蛋疼的IE6),需要依赖第三方库(Prototype, MooTools)或JSON2。
jStorage支持存储Strings,Numbers,JavaScript对象,Arrays,甚至是原生XML节点。 jStorage还支持设置TTL(Time to Live, 生存时间)类型的值用于自动到期存储的keys。最重要的是(也是attractive的) - 当浏览器页签中某个key值变更时或者订阅/发布事件以通知其他标签/窗口的能力。这使得jStorage能够成为Web应用程序本地PubSub(publish/subscribe)平台。
jStorage非常小,min压缩后只有7kb,zip打包后只有4kb。
索引
- 基本信息
- 下载
- 交互测试
- 浏览器支持
- 用法
- 函数参考
- 使用示例
- 问题
- 联系和版权
基本信息
浏览器支持
Browser | Storage support | Survives browser restart | Survives browser crash | Storage size |
Chrome 4 | + | + | + | 5 MB |
Firefox 3.6 | + | + | + | 5 MB |
Firefox 3 | + | + | + | 5 MB |
Firefox 2 | + | + | + | 5 MB |
IE8 | + | + | + | 10 MB |
IE7 | + | + | + | 128 kB |
IE6 | + | + | + | 128 kB |
Opera 10.50 | + | + | - | 5 MB |
Opera 10.10 | - | N/A | N/A | N/A |
Safari 4 | + | + | + | 5 MB |
Iphone Safari | + | + | + | 5 MB |
Safari 3 | - | N/A | N/A | N/A |
用法
jStorage的使用需要引入Prototype/MooTools/jQuery +jQuery-JSON /JSON2,无论哪种方式,语法保持不变。
- <script src="//cdnjs.cloudflare.com/ajax/libs/json2/20110223/json2.js"></script>
- <script src="https://raw.github.com/andris9/jStorage/master/jstorage.js"></script>
- <script> /* $.jStorage is now available */ </script>
- <script src="//cdnjs.cloudflare.com/ajax/libs/json2/20110223/json2.js"></script>
- <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
- <script src="https://raw.github.com/andris9/jStorage/master/jstorage.js"></script>
- <script> /* $.jStorage is now available */ </script>
函数参考
set(key, value[, options])
正确用法:$.jStorage.set("xml", xml_node)错误:$.jStorage.set("xml", {xml: xml_node})
示例:
- <script src="json2.js"></script>
- <script src="jquery.js"></script>
- <script src="jstorage.js"></script>
- <script>
- $.jStorage.set("key1", "value1", {TTL: 3000});
- setInterval(function(){
- var vaule = $.jStorage.get("key1");
- document.writeln(vaule + ";");
- },1000);
- </script>
get(key[, default])
value = $.jStorage.get(key)
value = $.jStorage.get(key, "default value")
deleteKey(key)
setTTL(key, ttl)
$.jStorage.setTTL("mykey", 3000); // TTL3秒
对key设置TTL(毫秒数)。设置0或负值以删除key
getTTL(key)
ttl = $.jStorage.getTTL("mykey"); // TTL in milliseconds or 0
获取key剩余的生存时间(毫秒数)。如果key值不存在或者未设置TTL,返回0
- <script>
- $.jStorage.set("key1", "value1", {TTL: 5000});
- setInterval(function(){
- var ttl = $.jStorage.getTTL("key1");
- document.writeln(ttl + ";");
- },1000);
- </script>
flush()
$.jStorage.flush() —— 清除所有key
index()
$.jStorage.index() —— 以数组形式返回当前使用的所有key
var index = $.jStorage.index();
console.log(index); // ["key1","key2","key3"]
storageSize()
$.jStorage.storageSize() —— 返回存储的数据所占用的bytes
currentBackend()
$.jStorage.currentBackend() —— 返回当前使用的存储引擎,如果没有存储引擎返回false。
reInit()
$.jStorage.reInit() —— 重载数据。
storageAvailable()
$.jStorage.storageAvailable() —— 如果存储可用,返回true
subscribe(channel, callback)
$.jStorage.subscribe("ch1", function(channel, payload){ // 订阅 PubSub通道
console.log(payload+ " from " + channel);
});
publish(channel, payload)
$.jStorage.publish("ch1", "data") —— 发布有效值到PubSub通道
示例:
- <script src="json2.js"></script>
- <script src="jquery.js"></script>
- <script src="jstorage.js"></script>
- <script>
- function sync(){
- $.jStorage.publish("sync-textarea", $("data").value);
- }
- $.jStorage.subscribe("sync-textarea", function(channel, data){
- $("data").value = data;
- });
- </script>
- <div>
- <h2>Interactive test - publish/subscribe</h2>
- <p>Open the same page in other tabs or windows of the same browser</p>
- <p><textarea id="data" style="width: 600px; height: 100px;"></textarea></p>
- <p><input type="button" id="nupp" value="Sync entered data with other tabs/windows" onclick="sync()"></p>
- </div>
listenKeyChange(key, callback)
$.jStorage.listenKeyChange("mykey", function(key, action){
console.log(key + " has been " + action);
});
示例:
- <pre name="code" class="html"> <script src="json2.js"></script>
- <script src="jquery.js"></script>
- <script src="jstorage.js"></script>
- <script>
- function changeKey(){
- $.jStorage.set("mykey", 1);
- }
- function deleteKey(){
- $.jStorage.deleteKey("mykey");
- }
- $.jStorage.listenKeyChange("mykey", function(key, action){
- console.log(key + " has been " + action);
- });
- $.jStorage.listenKeyChange("mykey", function(key, action){
- console.log(key + " has been:::: " + action);
- });
- </script>
- <div>
- <p><input type="button" onclick="changeKey()" value="changeKey"></p>
- <p><input type="button" onclick="deleteKey()" value="deleteKey"></p>
- </div></pre>
stopListening(key[, callback])
$.jStorage.stopListening("mykey") —— 清除mykey的所有listeners,如果callback设置了,只有使用过的回调会被清除,否则所有的listeners都会被丢弃
使用示例
- <span style="font-weight:normal">jQuery -jQuery没有内置JSON编码/解码器,如果要支持IE6//IE7,需要以如下方式引用
- <script src="//cdnjs.cloudflare.com/ajax/libs/json2/20110223/json2.js"></script>
- <script src="//code.jquery.com/jquery-1.9.1.min.js"></script>
- <script src="jstorage.js"></script>
- <script>
- // Check if "key" exists in the storage
- var value = $.jStorage.get("key");
- if(!value){
- // if not - load the data from the server
- value = load_data_from_server()
- // and save it
- $.jStorage.set("key",value);
- }
- </script></span>
- <span style="font-weight:normal">Prototype
- <script src="//ajax.googleapis.com/ajax/libs/prototype/1.7.1.0/prototype.js"></script>
- <script src="jstorage.js"></script>
- <script>
- // Check if "key" exists in the storage
- var value = $.jStorage.get("key");
- if(!value){
- // if not - load the data from the server
- value = load_data_from_server()
- // and save it
- $.jStorage.set("key",value);
- }
- </script></span>
问题
- Cookies are not meant to save large quantities of data locally - they are meant to pass around ID values to keep track of users. Internet Explorer allows to use up to 20 cookies per domain with the payload of 4kB per cookie. It isn't very much, especially considering the need to chunk larger data into smaller bits. The fact that the data (max. 80 kB) is sent to the server with *every* call doesn't sound much of a good idea either.
联系和版权
jStorage is licensed under MIT-styled license, so basically you can do whatever you want to do with it.
参考:
用于浏览器本地存储的js插件 - jStorage的更多相关文章
- 浏览器本地存储(browser-storage,HTML5-localStorage > IE-UserData > Cookie)
https://www.baidufe.com/component/browser-storage/index.html BrowserStorage是浏览器本地存储的一个解决方案,存储优先级依次为: ...
- jquery访问浏览器本地存储cookie,localStorage和sessionStorage
前言:cookie,localStorage和sessionStorage都是浏览器本地存储数据的地方,其用法不尽相同:总结一下基本的用法. 一.cookie 定义: 存储在本地,容量最大4k,在同源 ...
- 浏览器本地存储(browser-storage)
https://www.baidufe.com/component/browser-storage/api.html 首页 | API参考 | 升级日志 BrowserStorage.api.set( ...
- Vue学习之---浏览器本地存储(8/17)
博客园(纯干货):https://www.cnblogs.com/zheng-yuzhu/ 文章目录 1.基础知识 2.代码实例(localStorage.html) 3.测试效果 4.代码实例(se ...
- vis用于做3D图表的js插件
vis.js用于做3D图表:(浏览网站需要FQ)实例:http://visjs.org/graph3d_examples.html代码下载:https://github.com/almende/vis
- JavaScript浏览器本地数据存储
浏览器本地存储主要使用的是sessionStorage和localStorage.两者都支持,sessionStorage保存的是浏览器和服务器的一次对话信息,只在一次回话中有效.当在新标签页或新窗口 ...
- JavaScript:浏览器的本地存储
cookie.localStorage.sessionStorage的使用 <!DOCTYPE html> <html lang="en"> <hea ...
- 本地存储sessionStorage 、 localStorage 、cookie整理
sessionStorage . localStorage .cookie 的区别 sessionStorage 和 localStorage 是HTML5 Web Storage API 提供的,可 ...
- HTML5本地存储(Local Storage) 的前世今生
长久以来本地存储能力一直是桌面应用区别于Web应用的一个主要优势.对于桌面应用(或者原生应用),操作系统一般都提供了一个抽象层用来帮助应用程序保存其本地数据 例如(用户配置信息或者运行时状态等). 常 ...
随机推荐
- Kubernetes Deployment滚动升级
我们k8s集群使用的是1.7.7版本的,该版本中官方已经推荐使用Deployment代替Replication Controller(rc)了,Deployment继承了rc的全部功能外,还可以查看升 ...
- linux shell学习一
本博客参考自: http://www.cnblogs.com/waitig/p/5523409.html <shell从入门到精通> 张春晓编著 Shell简介 Shell自身是一个用C ...
- vim 常用快捷键(整理版)
最常用: x 删除后面的字符 X 删除前一个字符 删除3个字符就是3x dd:删除一行 D 删除到行尾 J:删除换行符,使下一行并上来. nJ:连接后面的n行 u:撤销上一次操作 ...
- My97DatePicker 报错 My97DP is not defined
https://blog.csdn.net/BoomLee/article/details/80967926
- poi对word的操作(总结)
★★★ POI在读写word docx文件时是通过xwpf模块来进行的,其核心是XWPFDocument. 1.正文段落:一个文档包含多个段落Paragraph,一个段落包含多个Runs,一个R ...
- 2015/9/28 Python基础(19):类的定制和私有性
用特殊方法定制类前面我们讲了方法的两个重要方面:首先,方法必须在调用前被绑定(到它们相应类的某个实例中):其次,有两个特殊方法可以分别作为构造器和解构器的功能,分别名为__init__()和__del ...
- Python学习笔记(三十一)正则表达式
---恢复内容开始--- 摘抄自:https://www.liaoxuefeng.com/wiki/0014316089557264a6b348958f449949df42a6d3a2e542c000 ...
- Linux命令之uptime
这是什么 uptime用来查看系统已经启动了多长时间了. 它显示的信息和w命令的头(第一行)是一样一样的. 举个栗子 举一个实际的应用场景: 比如发现服务器上的某些没有加入开机启动的服务挂了一片,这个 ...
- MM(Majorize-Minimization, Minorize-Maximization)优化方法
MM算法思想 MM算法是一种迭代优化方法,它利用函数的凸性来找到原函数的最大值或最小值.当原目标函数\(f(\theta)\)较难优化时,算法不直接对原目标函数求最优解,而去求解逼近于原目标函数的一个 ...
- ueditor和thinkphp框架整合修改版
基于tp官网上的一篇文章修改的 因为tp中所有目录其实都是性对于入口文件的 在原来的基础上略做修改后 已经做到 无论项目放在www下的任何位置 图片在编辑器中回填后都能正常显示! http://fi ...