Web 前端实现本地存储

yuanzm

当我们在提及web前端本地存储的时候,首先需要介绍一下本地化存储的概念和历史。本地化存储从来不是一个新奇的概念,因为web应用程序一直在追求的就是媲美甚至超越桌面应用程序。但是桌面应用程序一直优于web应用程序一个很重要的原因是它的本地化存储得到了很好的支持。对于本地应用程序,操作系统会提供一个抽象层,用于存储和获取特定于应用程序的数据,这些数据可以存储于注册表、INI文件,或者其他什么地方,这取决于操作系统的实现,如果本地应用程序需要不单是键值对形式的本地存储,可以使用嵌入式数据库或其他很多种解决方案。而对于web应用程序,它的本地存储一步一步走到今天的HTML5本地存储是非常不容易的。为了描述它的历史,我们可以先看一张图片:

图片描述
从图片可以看出,无论是从存储数据的大小还是兼容性来看,web前端本地存储都走得不容易。在着重介绍HTML5本地存储之前,我们先来看一看前面几个存储方式的概念。

  • HTTP cookie:HTTP cookie的缺点很明显,最多只能存储4KB的数据,每个HTTP请求都会被传送回服务器,明文传输(除非你使用SSL)。
    在这里简单介绍一下Cookie。Cookie是为了解决HTTP无状态的特性而出现的,也可以叫用户识别机制。常用的用户识别机制包括:

    • 承载用户信息的HTTP首部
    • 客户端IP地址追踪技术,通过用户的IP地址对其进行识别
    • 用户登录,用认证机制来识别用户
    • 胖URL,一种在URL中嵌入识别信息的技术
    • cookie,一种强大且高效的持久身份识别技术

对于购物网站而言,cookie是非常重要的,为了实现购物车功能,把已选物品加入cookie,可以实现不同页面之间数据的同步,同时在提交订单的时候又会把这些cookie传到后台,大大方便了前后端开发

  • userData是微软在上世纪90年代的浏览器大战时推出的本地存储方案,借助DHTML的behaviour属性来存储本地数据, 允许每个页面最多存储64K数据,每个站点最多640K数据,userData的缺点显而易见,它不是Web标准的一部分,除非你的程序只需要支持IE, 否则它基本没什么用处。

  • Flash cookie的名字有些误导,它实际上和HTTP cookie并不是一回事,或许它的名字应该叫做"Flash本地存储”,Flash cookie默认允许每个站点存储不超过100K的数据,如果超出了,Flash会自动向用户请求更大的存储空间,借助Flash的 ExternalInterface接口,你可以很轻松地通过Javascript操作Flash的本地存储。Flash的问题很简单,就是因为它是 Flash。

  • Gears是Google在07年发布的一个开源浏览器插件,旨在改进各大浏览器的兼容性,Gears内置了一个基于SQLite的嵌入式 SQL数据库,并提供了统一API对数据库进行访问,在取得用户授权之后,每个站点可以在SQL数据库中存储不限大小的数据,Gears的问题就是 Google自己都已经不用它了。

从上面的简介我们可以看出,在以前,本地存储面临的主要问题是,对于存储容量较大的方式,需要特定的插件支持;对于不需要插件支持的存储方式,则处于安全问题或者大小限制而遭到扼杀。在这种双重的矛盾面前,HTML5本地存储横空出世,对于前端开发人员是一种巨大的福音。

所谓的HTML5本地存储更精确的说法应该是DOM存储。根据MDN的定义,DOM存储的机制是通过存储字符串类型的键/值对,来提供一种安全的存取方式.这个附加功能的目标是提供一个全面的,可以用来创建交互式应用程序的方法(包括那些高级功能,例如可以离线工作一段时间)。

HTML5的DOM存储分成两种:SessionStorage和LocalStorage。在当代浏览器中的兼容性如下:
图片描述
上图中提及的globalStorage是非标准的,已经废弃,在这里我们直接忽略它。而sessionStorage和localStorage在绝大部分现代浏览器中已经得到了很好的支持,但是既然是绝大部分,就必须照顾那些还不支持这两个对象的浏览器。为了检测浏览器是否支持这两个对象,我们可以简单的用下面的代码来检测:

function storageSupport() {  
        try {  
            return 'localStorage' in window && window['localStorage'] !== null;  
        } catch (e) {  
            return false;  
        }  
}

非常幸运的是,这两种对象的使用方式都非常简单,这里借用网上 的一张图:
图片描述
首先我们来看一看sessionStorage,sessionStorage 是个全局对象,它维护着在页面会话(page session)期间有效的存储空间。只要浏览器开着,页面会话周期就会一直持续。当页面重新载入(reload)或者被恢复(restores)时,页面会话也是一直存在的。每在新标签或者新窗口中打开一个新页面,都会初始化一个新的会话。这句话看起来比较抽象,我们直接看一个demo:

 var name = sessionStorage.setItem("myname","yuanzm");
 alert(sessionStorage.getItem("myname"));

当我们在浏览器中打开的时候,就会弹出窗口,显示“yuanzm”,然后我们按F12键,查看浏览器的调试窗口:
图片描述

我们能够发现,在浏览器的本地存储sessionStorage中已经有了key值为“myname”的项。这个时候,刷新页面,仍然会弹出“yuanzm”,因为如果不调用sessionStorage.removeItem()或者手动清除这个项的话,这个项将一直存在。而上面提到的“只要浏览器开着,页面会话周期就会一直持续。当页面重新载入(reload)或者被恢复(restores)时,页面会话也是一直存在的。每在新标签或者新窗口中打开一个新页面,都会初始化一个新的会话”的意思是说,如果我们不重新设置myname的值,在新打开一个浏览器标签或者再次打开一个浏览器窗口的时候,这个值是不存在的,也就是null。为了验证这一点,很简单,我们把上面两行代码的第一行注释掉,然后刷新页面,接着在新的浏览器标签中打开这个文件。这两个动作分别会产生什么效果呢?答案很简单,当再次刷新页面的时候,仍然会弹出“yuanzm”,因为这个数据已经保存在本地了,而修改代码之后在新的页面打开,得到的结果是null,因为当前页面会话中没有“myname”这个值。

接下来我们看一看localStorage,他是跨多个窗口,且持续范围可超过当前会话;意味着当浏览器关闭再重新打开,数据依然是可用的;拿上面的例子来说,当修改代码之后,在新的标签打开页面,仍然会弹出“yuanzm”,我们再次在浏览器中查看效果:
图片描述

 由于这两个对象的使用很简单,暂时就介绍到这里。下面还需要介绍一下的就是兼容性问题。原因很简单,因为并不是所有的浏览器都支持这两个对象。这里的兼容包括两种,第一种是在没有原生支持localStorage的浏览器中使用,第二种是兼容不同浏览器对于这两种用法的差异。对于第一种,MDN给出了兼容代码:

if (!window.localStorage) {
  Object.defineProperty(window, "localStorage", new (function () {
    var aKeys = [], oStorage = {};
    Object.defineProperty(oStorage, "getItem", {
      value: function (sKey) { return sKey ? this[sKey] : null; },
      writable: false,
      configurable: false,
      enumerable: false
    });
    Object.defineProperty(oStorage, "key", {
      value: function (nKeyId) { return aKeys[nKeyId]; },
      writable: false,
      configurable: false,
      enumerable: false
    });
    Object.defineProperty(oStorage, "setItem", {
      value: function (sKey, sValue) {
        if(!sKey) { return; }
        document.cookie = escape(sKey) + "=" + escape(sValue) + "; path=/";
      },
      writable: false,
      configurable: false,
      enumerable: false
    });
    Object.defineProperty(oStorage, "length", {
      get: function () { return aKeys.length; },
      configurable: false,
      enumerable: false
    });
    Object.defineProperty(oStorage, "removeItem", {
      value: function (sKey) {
        if(!sKey) { return; }
        var sExpDate = new Date();
        sExpDate.setDate(sExpDate.getDate() - 1);
        document.cookie = escape(sKey) + "=; expires=" + sExpDate.toGMTString() + "; path=/";
      },
      writable: false,
      configurable: false,
      enumerable: false
    });
    this.get = function () {
      var iThisIndx;
      for (var sKey in oStorage) {
        iThisIndx = aKeys.indexOf(sKey);
        if (iThisIndx === -1) { oStorage.setItem(sKey, oStorage[sKey]); }
        else { aKeys.splice(iThisIndx, 1); }
        delete oStorage[sKey];
      }
      for (aKeys; aKeys.length > 0; aKeys.splice(0, 1)) { oStorage.removeItem(aKeys[0]); }
      for (var iCouple, iKey, iCouplId = 0, aCouples = document.cookie.split(/\s*;\s*/); iCouplId < aCouples.length; iCouplId++) {
        iCouple = aCouples[iCouplId].split(/\s*=\s*/);
        if (iCouple.length > 1) {
          oStorage[iKey = unescape(iCouple[0])] = unescape(iCouple[1]);
          aKeys.push(iKey);
        }
      }
      return oStorage;
    };
    this.configurable = false;
    this.enumerable = true;
  })());
}

至于第二种,在github上面有很多优秀的代码,博主这里推荐其中一份:https://github.com/mortzdk/localStorage

阅读 19.7k

Web开发手记
主要发布自己在学习Web开发过程中的心得和体会

Github,欢迎Follow~

4.9k 声望
1.9k 粉丝
0 条评论

Github,欢迎Follow~

4.9k 声望
1.9k 粉丝
文章目录
宣传栏