JavaScript本地存储(5) : 实际运用及总结

提醒：本页面将不再更新、维护或者支持，文章、评论所叙述内容存在时效性，涉及技术细节或者软件使用方面不保证能够完全有效可操作，请谨慎参考！

任何的技术如果不能运用到最终产品中那么只能永远是理论上的东西，前面我分了4篇介绍了JavaScript本地存储，下面应该介绍一下实际运用及代码整合了，为什么要整合呢，看过我前面文章的朋友应该知道有些功能是新版本浏览器才有的比如localStroage，有的功能是某些浏览器特有的比如IE专享的userData等，还有一些是功能上比较弱的，比如Cookie，它支持的存储空间就有限，如何才能统筹这些存储功能的资源，以及如何在一个功能不支持的情况下能另寻蹊径从而实现优雅的降级是我们这章要讨论的内容，我们要利用现有的本地存储的模式，做到尽可能的全兼容，最优兼容。

对于浏览器支持的存储模式我们可以采用一种线性探测，即以localStorage > globalStorage > userData > Cookie的优先级探测可支持的本地存储的模式，如何判断浏览器是否支持一种存储模式，我们可以修改一下先前提供的IStorage接口，接口改变如下：

var IStorage = function() {
  this.setItem = function(key, value) {}
  this.getItem = function(key) {}
  this.remove = function(key) {}
  this.isAvailable = function() {}
}

由此可见，我们增加了this.isAvailable的接口函数，顾名思义，这个接口函数的功能就是判断存储模式是否被支持的，那么先前讲解的Cookie、UserData、DOMStorage类就要实现这个接口了。具体实现如下：

var Cookie = function() {
  // 其余代码略
  this.isAvailable = function() {
     return !!navigator.cookieEnabled;
  }
}

var UserData = function() {
  // 其余代码略
  this.isAvailable = function() {
    return !!document.all;
  }
}

var DOMStorage = function() {
  // 其余代码略
  this.isAvailable = function() {
    return !!this.domStorage;
  }
}

对于判断Cookie是否开启，我们可以通过navigator.cookieEnabled这个属性，前面两个感叹号是将非0值、0值、NULL等强制转换为布尔值，因为我们规定isAvailable返回的是布尔值，即true or false。对于UserData的判断，由于是IE专有的属性，那么只要判断是不是IE即可，我们用到判断IE专用的document.all属性进行IE识别，DOMStorage由于初始化会进行自动赋值，如果localStorage或者globalStorage不存在的话this.domStorage将为null，所以我们只需要判断this.domStorage即可。

到这里我们接口也改良过了，下面到核心部分，就是灵活判断并选择最优的存储方案。当然我们需要用到上一章讲解的StorageFactory类工厂，算法实现如下：

var createStorage = function() {
  var storage,namelist = ['DOMStorage', 'UserData', 'Cookie'];
  for (var i=0; i<namelist.length; i++) {
    storage = StorageFactory.create(namelist[i]);
        if (storage.isAvailable())
          return storage;
  }
  return null;
}

然后我们就可以通过createStorage来实现创建本地存储，然后调用接口定义的setItem、getItem、remove等方法了，怎么样是不是很方便。

最后整合好的js文件在这里 JStorage.js 。

2 thoughts on this post