Web 技术研究所

我一直坚信着,Web 将会成为未来应用程序的主流

需要lock可以考虑indexedDB

  上一篇文章中已经说过了缺少lock带来的问题,并且告诉大家localStorage是不带lock功能的。那么要实现前端的数据共享并且需要lock功能那就需要使用其它本储存方式,比如indexedDB。indededDB使用的是事务处理的机制,那实际上就是lock功能。
  做这个测试需要先简单的封装下indexedDB的操作,因为indexedDB的连接比较麻烦,而且两个测试页面都需要用到 //db.js
//封装事务操作
IDBDatabase.prototype.doTransaction=function(f){
  f(this.transaction(["Obj"],"readwrite").objectStore("Obj"));
};
//连接数据库,成功后调用main函数
(function(){
  //打开数据库
  var cn=indexedDB.open("TestDB",1);
  //创建数据对象
  cn.onupgradeneeded=function(e){
    e.target.result.createObjectStore("Obj");
  };
  //数据库连接成功
  cn.onsuccess=function(e){
    main(e.target.result);
  };
})();
  接着是两个测试页面 <script src="db.js"></script>
<script>
//a.html
function main(e){
  (function callee(){
    //开始一个事务
    e.doTransaction(function(e){
      e.put(1,"test"); //设置test的值为1
      e.put(2,"test"); //设置test的值为2
    });
    setTimeout(callee);
  })();
};
</script>
<script src="db.js"></script>
<script>
//b.html
function main(e){
  (function callee(){
    //开始一个事务
    e.doTransaction(function(e){
      //获取test的值
      e.get("test").onsuccess=function(e){
        console.log(e.target.result);
      };
    });
    setTimeout(callee);
  })();
};
</script>
  和上次localStorage的测试原理一样,只是把localStorage换成了indexedDB事务处理。但是结果就不同

  测试的时候b.html中可能不会立即有输出,因为indexedDB正忙着处理a.html东西,b.html事务丢在了事务丢队列中等待。但是无论如何,输出结果也不会是1这个值。因为indexedDB的最小处理单位是事务,而不是localStorage那样以表达式为单位。这样只要把lock和unlock之间需要处理的东西放入一个事务中即可实现。另外,浏览器对indexedDB的支持不如localStorage,所以使用时还得考虑浏览器兼容。
网名:
54.144.24.*
电子邮箱:
仅用于接收通知
提交 悄悄的告诉你,Ctrl+Enter 可以提交哦
神奇海螺
[查看全部主题]
各类Web技术问题讨论区
发起新主题
本模块采用即时聊天邮件通知的模式
让钛合金F5成为历史吧!
次碳酸钴的技术博客,文章原创,转载请保留原文链接 ^_^