本地存储网络存储io_使用网络存储

最新推荐文章于 2024-02-25 10:30:15 发布

dingshi7798

最新推荐文章于 2024-02-25 10:30:15 发布

阅读量135

点赞数

文章标签： java python javascript js php ViewUI

原文链接：https://www.sitepoint.com/using-web-storage/

版权

本地存储网络存储io

欢迎阅读小型domStorage()函数系列中的另一篇文章，在这里，我想向您展示一个名为domStorage()的简洁抽象，它提供了一组与Web Storage交互的便捷函数，同时可以离散地处理所有最常见的要点。失败。

如果您还不熟悉Web存储（又名DOM存储），则建议您阅读Colin Ihrig的文章： Web存储API概述。

这是domStorage()函数的代码：

function domStorage(persist)
{
  try
  {
    var storage = window[persist ? 'localStorage' : 'sessionStorage'];
    if(!storage) { return null; }
  }
  catch(ex) { return null; }

  return {

    read : function(key)
    {
      return storage.getItem(key);
    }

    , write : function(key, value)
    {
      try
      {
        return storage[key] = value.toString();
      }
      catch(ex) { return null; }
    }

    , erase : function(key)
    {
      storage.removeItem(key);
      return true;
    }

    , keys : function()
    {
      for(var keys = [], n = storage.length, i = 0; i < n; i ++)
      {
        keys.push(storage.key(i));
      }
      return keys;
    }

    , clear : function()
    {
      try
      {
        storage.clear();
        return true;
      }
      catch(ex) { return false; }
    }
  };
}

如何使用功能

domStorage()函数返回一个对象，该对象包含可以用作诸如读取和写入值之类的快捷方式的方法。但是，如果不支持Web存储或在浏览器中将其禁用，则domStorage()函数将返回null 。首先调用domStorage()并保存它返回的引用，如下所示。

var storage = domStorage();

默认情况下，该函数创建对会话存储的引用-数据将在浏览器会话结束时自动删除。您还可以通过传递布尔值true选择持久存储，如下所示。在这种情况下，数据将一直保留到您或用户删除它为止。

var storage = domStorage(true);

有了storage引用后，应在尝试使用其方法之前测试它是否为null ：

var storage = domStorage();
if(storage !== null)
{
  //storage is supported
}

主要方法是具有单个key参数的read()和具有key和value write() 。存储交互是同步的 ，因此您可以在写入值后立即读取它：

storage.write("key", "value");
storage.read("key");

所有存储的值都是字符串，任何其他数据类型都将进行静默转换（例如123被保存为"123" ）。如果您需要存储复杂的数据，最好的方法是将其另存为JSON字符串：

storage.write("key", JSON.stringify(data));

如果成功，则read()和write()方法都返回一个字符串，否则返回null 。 read()失败意味着该键没有存储值，而write()失败意味着未保存该值。只有根据浏览器首选项设置的配额，该值对于可用的剩余存储空间而言太大时才会发生，我们将在下一部分中讨论。

if(storage.write("key", "value") === null)
{
  //value was not saved
}

还有两种删除方法，一种用于删除单个值：

storage.erase("key");

另一个用于清除存储对象中的每个值（请特别注意！）：

storage.clear();

最后，对于当前在存储对象中定义的每个值，都有一个keys()方法返回一个字符串键数组：

var keys = storage.keys();

例如，您可以使用它来检查存储对象并找出其中包含多少数据：

var size = 0,
keys = storage.keys();

for(var n = keys.length, i = 0; i < n; i ++)
{
  size += storage.read(keys[i]).length;
}

alert((size / 1000).toFixed(2) + 'K');

功能如何运作

本质上， domStorage()函数所做的全部工作就是定义一组快捷方式，但是它也处理可能会导致错误的多个故障点。第一个也是最有可能发生的故障是在获取对存储对象本身的引用（根据persist参数指定为sessionStorage或localStorage ）时发生的。可能不支持该存储对象，但是即使支持该存储对象，在引用该存储对象时也可能会引发错误。这是因为如果使用存储会违反策略决定（例如被用户禁用），则该规范允许浏览器抛出安全错误。因此，这是我们需要异常处理的第一个地方，捕获任何此类错误并为失败返回null ：

try
{
  var storage = window[persist ? 'localStorage' : 'sessionStorage'];
  if(!storage) { return null; }
}
catch(ex) { return null; }

下一个潜在的失败是保存值时 ，因为我们可以存储多少数据受到限制。浏览器设置配额，并且大多数浏览器还提供用户偏好来进行调整。据我所知，尚无可靠的方法以编程方式确定配额是多少，但通常绰绰有余2-5MB ，具体取决于浏览器。如果保存的值超过该配额，浏览器将引发另一个错误。因此，我们处理该问题并为失败返回null ：

try
{
  return storage[key] = value.toString();
}
catch(ex) { return null; }

您会注意到，我使用方括号表示法而不是setItem()函数，这仅仅是为了方便在单个表达式中保存和返回值，作为对此的替代方法：

try
{
  storage.setItem(key, value);
  return value.toString();
}
catch(ex) { return null; }

失败的最后一点是使用clear()函数时，因为某些早期的实现不支持它（例如Firefox 3）。为了避免在这些实现中引起错误，我们再次使用异常处理，然后返回true或false表示成功：

try
{
  storage.clear();
  return true;
}
catch(ex) { return false; }

如果您确实确实需要此功能在较旧的实现中工作，则可以通过使用keys()方法来完成相同的事情很简单–遍历返回的键并手动擦除每个值：

if(storage.clear() === false)
{
  var keys = storage.keys();

  for(var n = keys.length, i = 0; i < n; i ++)
  {
    storage.erase(keys[i]);
  }
}

请注意，Firefox 2-3对Web Storage的支持有限-除了缺少对clear()支持之外，它们根本不支持localStorage ，仅支持sessionStorage 。值得注意的是IE7根本不支持Web存储。 IE8确实支持它，即使是在兼容模式下也给人以错误的印象，即IE7也支持它。