本地存储的兼容解决方案

记事本 2011-10-13 13:56:59 累计浏览 2,429 次

本机暂存

内容概览

这篇讲的是如何让本地存储在不同浏览器中“通吃”。文章一针见血地指出了一个现实问题：经典的IE浏览器和现代的Chrome、Firefox等主流浏览器，在本地存储的实现上使用了完全不同的技术方案——前者依赖`userData`，后者则使用`localStorage`。

更关键的是，这两种方案的数据作用域差异很大。`userData`存储的数据，其可见性仅限于同一目录下的页面。这意味着，位于`http://example.com/1/`下的任何页面，都能读取到`foo.html`存的数据，但`http://example.com/2/`下的页面则完全无法访问。相比之下，`localStorage`的数据作用域要宽广得多，只要是同一个域名（包括子路径）下的所有页面，都可以共享这些数据。

因此，文章的核心方案就是提供一套兼容策略，在代码中针对不同的浏览器环境，调用对应的存储API。这确保了无论用户使用的是哪种浏览器，应用的关键状态或配置都能被可靠地本地持久化。对于需要实现诸如用户偏好设置、草稿保存等功能的开发者而言，理解这两种存储方式的根本差异，并在项目初期就规划好兼容处理，是避免后期出现诡异bug的关键一步。

IE浏览器用userData，主流浏览器用LocalStorage来解决本地存储的需求。userData存储的数据对于同一目录下的地址是可见的，如http://www.zhoumingzhi.com/1/foo.html可以访问到http://www.zhoumingzhi.com/1/bar.html存的数据。而LocalStorage存储的数据对相同域名下的所有页面都是可见的。

var localStorageAdapter = { 
  
     storeName: 'NTESBBS', 
  
     isLocalStorage: window.localStorage? true: false, 
  
     dataDOM: this.isLocalStorage? null: (function() { 
          try{ 
               var dataDOM = document.createElement('input'), 
                    expires = new Date(); 
  
               dataDOM.type = 'hidden'; 
               dataDOM.style.display = 'none'; 
               dataDOM.addBehavior('#default#userData'); 
               document.body.appendChild(dataDOM); 
  
               expires.setDate(expires.getDate() + 30); 
               dataDOM.expires = expires.toUTCString(); 
  
               return dataDOM; 
          } catch(ex) { 
               return null; 
          } 
     })(), 
  
     set: function(key, value) { 
          var dataDOM = this.dataDOM; 
  
          if(this.isLocalStorage) { 
               window.localStorage.setItem(key, value); 
          } else { 
               if(dataDOM) { 
                    dataDOM.load(this.storeName); 
                    dataDOM.setAttribute(key, value); 
                    dataDOM.save(this.storeName); 
               } 
          } 
     }, 
  
     get: function(key) { 
          var dataDOM = this.dataDOM; 
  
          if(this.isLocalStorage) { 
               return window.localStorage.getItem(key); 
          } else { 
               if(dataDOM) { 
                    dataDOM.load(this.storeName); 
                    return dataDOM.getAttribute(key); 
               } 
          } 
     }, 
  
     remove: function(key) { 
          var dataDOM = this.dataDOM; 
  
          if(this.isLocalStorage) { 
               window.localStorage.removeItem(key); 
          } else { 
               if(dataDOM) { 
                    dataDOM.load(this.storeName); 
                    dataDOM.removeAttribute(key); 
                    dataDOM.save(this.storeName); 
               } 
          } 
     } 
}

同分类推荐文章

translateZ() （2026-06-25 21:18:56）
translateY() （2026-06-25 21:17:56）
translateX() （2026-06-25 21:16:01）

查看更多前端文章 →

建议继续学习

HTML5 离线缓存-manifest简介（累计阅读 17,102）
HTML 5 的data-* 自定义属性（累计阅读 14,349）
jQuery的data()方法（累计阅读 8,650）
前端必须熟悉的10个CSS3属性（累计阅读 7,718）
面向移动设备的HTML5开发框架梳理（累计阅读 7,415）
前端开发中Cookie那些事儿（累计阅读 7,369）
30个超棒的404错误页面（累计阅读 7,301）
HTML5+CSS3 loading 效果收集（累计阅读 6,438）
给HTML初学者的30条最佳实践（累计阅读 5,808）
Phonegap + HTML5 开发经验小结（累计阅读 5,341）