简介

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。

索引

  1. 基本信息
  2. 下载
  3. 交互测试
  4. 浏览器支持
  5. 用法
  6. 函数参考
  7. 使用示例
  8. 问题
  9. 联系和版权

基本信息

jStorage利用HTML5本地存储和IE低版本的userData behavior实现浏览器本地存储。
当前的可用情况:jStorage支持所有主流浏览器 — Internet Explorer 6+, Firefox 2+, Safari 4+, Chrome 4+, Opera 10.50+,如果浏览器不支持数据存储,也不会有任何异常产生—— jStorage仍然可以使用,只是没有实际存储而已。

下载

地址:github  (直接下载)

交互测试

添加一些值,并刷新页面 - 如果您的浏览器支持本地数据存储,那么值应该在页面刷新后依然存在。测试

浏览器支持

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,无论哪种方式,语法保持不变。

JSON2
  1. <script src="//cdnjs.cloudflare.com/ajax/libs/json2/20110223/json2.js"></script>
  2. <script src="https://raw.github.com/andris9/jStorage/master/jstorage.js"></script>
  3. <script> /* $.jStorage is now available */ </script>
jQuery

  1. <script src="//cdnjs.cloudflare.com/ajax/libs/json2/20110223/json2.js"></script>
  2. <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
  3. <script src="https://raw.github.com/andris9/jStorage/master/jstorage.js"></script>
  4. <script> /* $.jStorage is now available */ </script>

函数参考

set(key, value[, options])

$.jStorage.set(key, value, options)    ——   保存key-value键值对到本地存储。
key需要是字符串,否则会抛异常。
value值可以任意被JSON化的价值,包括对象和数组或XML节点。XML节点不能被嵌套在对象中——
正确用法:$.jStorage.set("xml", xml_node) 
错误:$.jStorage.set("xml", {xml: xml_node}) 
options是可选的对象。目前唯一可用的选项是可以用来设置key值对应的生存时间的值 ($.jStorage.set(key, value, {TTL: 1000});)。 如果TTL值设置为空,任何目前使用的TTL值的key将被删除。

示例:

  1. <script src="json2.js"></script>
  2. <script src="jquery.js"></script>
  3. <script src="jstorage.js"></script>
  4. <script>
  5. $.jStorage.set("key1", "value1", {TTL: 3000});
  6. setInterval(function(){
  7. var vaule = $.jStorage.get("key1");
  8. document.writeln(vaule + ";");
  9. },1000);
  10. </script>

get(key[, default])

value = $.jStorage.get(key)
value = $.jStorage.get(key, "default value")

get方法获取key对的vaule值,如果key不存在返回null,default存在时,如果key值存在返回实际值,如不存在返回default值。key需要是字符串,否则会抛异常。

deleteKey(key)

$.jStorage.deleteKey(key)    ——   删除key。key需要是字符串,否则会抛异常。

setTTL(key, ttl)

$.jStorage.set("mykey", "keyvalue");
$.jStorage.setTTL("mykey", 3000);    // TTL3秒
对key设置TTL(毫秒数)。设置0或负值以删除key

getTTL(key)

ttl = $.jStorage.getTTL("mykey");   // TTL in milliseconds or 0
获取key剩余的生存时间(毫秒数)。如果key值不存在或者未设置TTL,返回0

示例:
  1. <script>
  2. $.jStorage.set("key1", "value1", {TTL: 5000});
  3. setInterval(function(){
  4. var ttl = $.jStorage.getTTL("key1");
  5. document.writeln(ttl + ";");
  6. },1000);
  7. </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通道
示例:

  1. <script src="json2.js"></script>
  2. <script src="jquery.js"></script>
  3. <script src="jstorage.js"></script>
  4. <script>
  5. function sync(){
  6. $.jStorage.publish("sync-textarea", $("data").value);
  7. }
  8. $.jStorage.subscribe("sync-textarea", function(channel, data){
  9. $("data").value = data;
  10. });
  11. </script>
  12. <div>
  13. <h2>Interactive test - publish/subscribe</h2>
  14. <p>Open the same page in other tabs or windows of the same browser</p>
  15. <p><textarea id="data" style="width: 600px; height: 100px;"></textarea></p>
  16. <p><input type="button" id="nupp" value="Sync entered data with other tabs/windows" onclick="sync()"></p>
  17. </div>

listenKeyChange(key, callback)

$.jStorage.listenKeyChange("mykey", function(key, action){
    console.log(key + " has been " + action);
});

监听key值update,设置回调函数处理。在其他窗口/标签的更新有会触发,所以这个功能也可以用于某种形式的发布/订阅服务。

示例:

  1. <pre name="code" class="html">  <script src="json2.js"></script>
  2. <script src="jquery.js"></script>
  3. <script src="jstorage.js"></script>
  4. <script>
  5. function changeKey(){
  6. $.jStorage.set("mykey", 1);
  7. }
  8. function deleteKey(){
  9. $.jStorage.deleteKey("mykey");
  10. }
  11. $.jStorage.listenKeyChange("mykey", function(key, action){
  12. console.log(key + " has been " + action);
  13. });
  14. $.jStorage.listenKeyChange("mykey", function(key, action){
  15. console.log(key + " has been:::: " + action);
  16. });
  17. </script>
  18. <div>
  19. <p><input type="button" onclick="changeKey()" value="changeKey"></p>
  20. <p><input type="button" onclick="deleteKey()" value="deleteKey"></p>
  21. </div></pre>

stopListening(key[, callback])

$.jStorage.stopListening("mykey")     —— 清除mykey的所有listeners,如果callback设置了,只有使用过的回调会被清除,否则所有的listeners都会被丢弃

使用示例

  1. <span style="font-weight:normal">jQuery -jQuery没有内置JSON编码/解码器,如果要支持IE6//IE7,需要以如下方式引用
  2. <script src="//cdnjs.cloudflare.com/ajax/libs/json2/20110223/json2.js"></script>
  3. <script src="//code.jquery.com/jquery-1.9.1.min.js"></script>
  4. <script src="jstorage.js"></script>
  5. <script>
  6. // Check if "key" exists in the storage
  7. var value = $.jStorage.get("key");
  8. if(!value){
  9. // if not - load the data from the server
  10. value = load_data_from_server()
  11. // and save it
  12. $.jStorage.set("key",value);
  13. }
  14. </script></span>
  1. <span style="font-weight:normal">Prototype
  2. <script src="//ajax.googleapis.com/ajax/libs/prototype/1.7.1.0/prototype.js"></script>
  3. <script src="jstorage.js"></script>
  4. <script>
  5. // Check if "key" exists in the storage
  6. var value = $.jStorage.get("key");
  7. if(!value){
  8. // if not - load the data from the server
  9. value = load_data_from_server()
  10. // and save it
  11. $.jStorage.set("key",value);
  12. }
  13. </script></span>

问题

Why would you want to use jStorage when cookies work already in every browser?

  • 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.

联系和版权

© 2010 - 2012 Andris Reinman, andris.reinman@gmail.com
jStorage is licensed under MIT-styled license, so basically you can do whatever you want to do with it.
最近开发一个需求,同一个浏览器打开了多个页签,用户在一个页签上点了注销按钮,其他浏览器页签也要被注销。用户闲置30分钟超时也要一样的效果。由于不想从后台向前台发事件,计划借助浏览器本地存储的功能实现。闲逛git无意间发现一个开源小插件,简直是为这需求量身定制,因此翻译这篇API文档。
参考:

http://www.jstorage.info/

用于浏览器本地存储的js插件 - jStorage的更多相关文章

  1. 浏览器本地存储(browser-storage,HTML5-localStorage > IE-UserData > Cookie)

    https://www.baidufe.com/component/browser-storage/index.html BrowserStorage是浏览器本地存储的一个解决方案,存储优先级依次为: ...

  2. jquery访问浏览器本地存储cookie,localStorage和sessionStorage

    前言:cookie,localStorage和sessionStorage都是浏览器本地存储数据的地方,其用法不尽相同:总结一下基本的用法. 一.cookie 定义: 存储在本地,容量最大4k,在同源 ...

  3. 浏览器本地存储(browser-storage)

    https://www.baidufe.com/component/browser-storage/api.html 首页 | API参考 | 升级日志 BrowserStorage.api.set( ...

  4. Vue学习之---浏览器本地存储(8/17)

    博客园(纯干货):https://www.cnblogs.com/zheng-yuzhu/ 文章目录 1.基础知识 2.代码实例(localStorage.html) 3.测试效果 4.代码实例(se ...

  5. vis用于做3D图表的js插件

    vis.js用于做3D图表:(浏览网站需要FQ)实例:http://visjs.org/graph3d_examples.html代码下载:https://github.com/almende/vis

  6. JavaScript浏览器本地数据存储

    浏览器本地存储主要使用的是sessionStorage和localStorage.两者都支持,sessionStorage保存的是浏览器和服务器的一次对话信息,只在一次回话中有效.当在新标签页或新窗口 ...

  7. JavaScript:浏览器的本地存储

    cookie.localStorage.sessionStorage的使用 <!DOCTYPE html> <html lang="en"> <hea ...

  8. 本地存储sessionStorage 、 localStorage 、cookie整理

    sessionStorage . localStorage .cookie 的区别 sessionStorage 和 localStorage 是HTML5 Web Storage API 提供的,可 ...

  9. HTML5本地存储(Local Storage) 的前世今生

    长久以来本地存储能力一直是桌面应用区别于Web应用的一个主要优势.对于桌面应用(或者原生应用),操作系统一般都提供了一个抽象层用来帮助应用程序保存其本地数据 例如(用户配置信息或者运行时状态等). 常 ...

随机推荐

  1. Kubernetes Deployment滚动升级

    我们k8s集群使用的是1.7.7版本的,该版本中官方已经推荐使用Deployment代替Replication Controller(rc)了,Deployment继承了rc的全部功能外,还可以查看升 ...

  2. linux shell学习一

    本博客参考自: http://www.cnblogs.com/waitig/p/5523409.html <shell从入门到精通>  张春晓编著 Shell简介 Shell自身是一个用C ...

  3. vim 常用快捷键(整理版)

    最常用: x 删除后面的字符 X 删除前一个字符  删除3个字符就是3x dd:删除一行   D 删除到行尾 J:删除换行符,使下一行并上来.     nJ:连接后面的n行 u:撤销上一次操作     ...

  4. My97DatePicker 报错 My97DP is not defined

    https://blog.csdn.net/BoomLee/article/details/80967926

  5. poi对word的操作(总结)

    ★★★ POI在读写word docx文件时是通过xwpf模块来进行的,其核心是XWPFDocument.    1.正文段落:一个文档包含多个段落Paragraph,一个段落包含多个Runs,一个R ...

  6. 2015/9/28 Python基础(19):类的定制和私有性

    用特殊方法定制类前面我们讲了方法的两个重要方面:首先,方法必须在调用前被绑定(到它们相应类的某个实例中):其次,有两个特殊方法可以分别作为构造器和解构器的功能,分别名为__init__()和__del ...

  7. Python学习笔记(三十一)正则表达式

    ---恢复内容开始--- 摘抄自:https://www.liaoxuefeng.com/wiki/0014316089557264a6b348958f449949df42a6d3a2e542c000 ...

  8. Linux命令之uptime

    这是什么 uptime用来查看系统已经启动了多长时间了. 它显示的信息和w命令的头(第一行)是一样一样的. 举个栗子 举一个实际的应用场景: 比如发现服务器上的某些没有加入开机启动的服务挂了一片,这个 ...

  9. MM(Majorize-Minimization, Minorize-Maximization)优化方法

    MM算法思想 MM算法是一种迭代优化方法,它利用函数的凸性来找到原函数的最大值或最小值.当原目标函数\(f(\theta)\)较难优化时,算法不直接对原目标函数求最优解,而去求解逼近于原目标函数的一个 ...

  10. ueditor和thinkphp框架整合修改版

    基于tp官网上的一篇文章修改的  因为tp中所有目录其实都是性对于入口文件的 在原来的基础上略做修改后 已经做到 无论项目放在www下的任何位置 图片在编辑器中回填后都能正常显示! http://fi ...