登录
当前位置： 首页 > 工具软件 > jStorage > 使用案例 >

用于浏览器本地存储的js插件 - jStorage

钱瑞
2023-12-01

简介

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  ( 直接下载)

交互测试

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

浏览器支持

BrowserStorage supportSurvives browser restartSurvives browser crashStorage 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/AN/AN/A
Safari 4+++5 MB
Iphone Safari+++5 MB
Safari 3-N/AN/AN/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/

转载于:https://www.cnblogs.com/web100/p/ustorage.html

 类似资料：

相关阅读

用selenium浏览器插件测试利用第三方JS的浏览器缓存使用基于浏览器的JavaScript和Node处理本地文件系统js判断浏览器版本以及浏览器内核的方法浏览器缓存的CSS文件

相关文章

Bootstrap 插件概览QQ浏览器-客户端-一面QQ浏览器-客户端-二面腾讯-qq浏览器前端一面实战-Swing实现文件夹浏览

相关问答

Selenium-在计算机之间共享浏览器会话（cookie、本地存储）转移到本地存储的maven-安装-插件spring配置服务器-用于本地git存储库当不使用Chrome插件时，如何使浏览器堆栈本地测试工作？从Azure Blob存储下载CSV到浏览器

相关文档

Web 浏览器 API 文档Chrome 扩展开发文档 / 360 浏览器开发文档本地组策略编辑器 帮助文档小米对象存储服务 FDS 用户文档WordPress 插件开发
快捷导航： 新手教程 算法原理 架构设计 Java进阶 数据库进阶 大厂专栏 面试经验 编程笔记 编程问答 所有专题 文档资料 工具软件 电子书籍 小牛导航
在线工具： 房贷计算器 个税计算器 Linux命令查询 Json格式化 正则表达式 颜色转换 AES加解密 SHA1加密 MD5加密 毒鸡汤 字数统计 随机密码生成 进制转换 Base64编解码 励志句子
Copyright © 2019-2024 小牛知识库@xnip.cn. All Rights Reserved.