Question

以前，只要我使用localStorage，我就必须始终使用JSON.stringify将代码作为对象进行检索。

但是我刚刚在最新版本的Chromium localStorage中使用了Version 42.0.2308.0 canary (64-bit)，这就是它返回的内容：

localStorage
Storage {debug: "undefined", uid: "3", length: 2} 

typeof localStorage
"object"

何时以及哪些浏览器/手机现在支持localStorage作为对象？

Answer 1

来自https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Storage：

＆＃34;存储对象是标准的最新成员。因此，它们可能不会出现在所有浏览器中。您可以通过在脚本开头插入以下两个代码之一来解决此问题，允许在本身不支持它的实现中使用localStorage对象。＆＃34;

基本上，应该返回一种Object类型，但某些浏览器不兼容。您可以在代码的开头放置以下两个脚本之一来解决此问题：

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) + "; expires=Tue, 19 Jan 2038 03:14:07 GMT; 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; }
        document.cookie = escape(sKey) + "=; expires=Thu, 01 Jan 1970 00:00:00 GMT; 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 aCouple, iKey, nIdx = 0, aCouples = document.cookie.split(/\s*;\s*/); nIdx < aCouples.length; nIdx++) {
        aCouple = aCouples[nIdx].split(/\s*=\s*/);
        if (aCouple.length > 1) {
          oStorage[iKey = unescape(aCouple[0])] = unescape(aCouple[1]);
          aKeys.push(iKey);
        }
      }
      return oStorage;
    };
    this.configurable = false;
    this.enumerable = true;
  })());
}

＆＃34;这是另一个不太精确的localStorage对象模仿。它比前一个更简单，但它与旧浏览器兼容，如Internet Explorer＆lt; 8（即使在Internet Explorer 6中也经过测试和工作）。它也使用cookies。＆＃34;

if (!window.localStorage) {
  window.localStorage = {
    getItem: function (sKey) {
      if (!sKey || !this.hasOwnProperty(sKey)) { return null; }
      return unescape(document.cookie.replace(new RegExp("(?:^|.*;\\s*)" + escape(sKey).replace(/[\-\.\+\*]/g, "\\$&") + "\\s*\\=\\s*((?:[^;](?!;))*[^;]?).*"), "$1"));
    },
    key: function (nKeyId) {
      return unescape(document.cookie.replace(/\s*\=(?:.(?!;))*$/, "").split(/\s*\=(?:[^;](?!;))*[^;]?;\s*/)[nKeyId]);
    },
    setItem: function (sKey, sValue) {
      if(!sKey) { return; }
      document.cookie = escape(sKey) + "=" + escape(sValue) + "; expires=Tue, 19 Jan 2038 03:14:07 GMT; path=/";
      this.length = document.cookie.match(/\=/g).length;
    },
    length: 0,
    removeItem: function (sKey) {
      if (!sKey || !this.hasOwnProperty(sKey)) { return; }
      document.cookie = escape(sKey) + "=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/";
      this.length--;
    },
    hasOwnProperty: function (sKey) {
      return (new RegExp("(?:^|;\\s*)" + escape(sKey).replace(/[\-\.\+\*]/g, "\\$&") + "\\s*\\=")).test(document.cookie);
    }
  };
  window.localStorage.length = (document.cookie.match(/\=/g) || window.localStorage).length;
}

修改

除了我做了解释之外，我没有在引号中引用的这个答案的部分是几乎一个字一个字。

Answer 2

localStorage（对象）始终是一个类似对象的构造。这意味着，我们始终能够以类似

的方式访问数据

localStorage.foo = 42;

要检索该数据，我们可以调用localStorage.foo或使用提供的帮助函数，如

localStorage.getItem('foo');

但是localStorage实际上不是一个对象，你可以轻松调用

Object.prototype.toString.call(localStorage); // === [object Storage]

localStorage返回Object

2 个答案: