Get best of the week

网络存储



朋友们，美好的一天。

我向您介绍了Pete LePage 的文章“ Web的存储”的翻译。

有几种用于在浏览器中存储数据的技术。哪一个更好？

在某些地方，互联网连接可能很差，甚至没有。因此，离线支持是渐进式Web应用程序的关键功能之一。即使是高速连接，也应谨慎使用缓存和其他技术来改善用户体验。有几种保存文件（HTML，JavaScript，CSS，图像等）和数据（用户数据，新闻等）的方法。但是哪种解决方案更好选择？以及如何保证其耐用性？

使用什么？


我可以建议以下几点：


所有现代浏览器均支持IndexedDB和Cache API。它们是异步的，即 不要阻塞主线程（代码执行）。它们在Window对象，Web工作人员和服务工作人员处可用。换句话说，它们可以在任何地方使用。

那其他机制呢？


浏览器还具有其他数据存储机制，但是它们具有一定的局限性，并可能导致性能问题。


?


至少几百兆，可能几百兆。它取决于浏览器，但是，存储量通常基于用户设备中的可用内存量。

  • Chrome浏览器最多可使用60％的磁盘空间。您可以使用StorageManager API来确定限制（配额）。
  • Internet Explorer 10及更高版本可以存储多达250 MB的数据。
  • Firefox允许您存储多达2 GB的数据。您可以使用StorageManager API来确定限制。
  • Safari（台式机和移动版）最多可存储1 GB数据。达到限制后，Safari会请求用户许可以将配额增加200 MB。

过去，达到存储限制时，浏览器请求用户许可以增加内存量。例如，当达到50 MB的限制时，浏览器请求用户许可以将配额增加到100 MB，因此每50 MB增加一次。

如今，大多数浏览器都不会自动增加配额内的存储量。Safari是一个例外，它达到750 MB时，要求用户许可以将限制增加到1.1 GB。尝试超过配额将失败。

如何查看限额余额？


为此，在许多浏览器中，您可以使用StorageManager API。它显示了IndexedDB和Cache API使用的字节总数，使您可以计算余数。

if(navigator.storage && navigator.storage.estimate) {
  const quota = await navigator.storage.estimate()
  // quota.usage ->   
  // quota.quota ->   
  const percentageUsed = (quota.usage / quota.quota) * 100
  console.log(`  ${ percentageUsed}% `)
  const remaining = quota.quota - quota.usage
  console.log(`   ${remaining} `)
}

请注意，并非所有浏览器都支持StorageManager API。但是，即使受支持，也必须提供错误处理程序。在某些情况下，配额可能会超出实际的存储容量。

检查


在开发过程中，您可以使用浏览器工具来跟踪各种存储库的状态并清理它们。



在撰写本文时，我写了这个简单的工具来快速测试存储功能。这是一种快速简便的方法，可以尝试不同的存储机制，并查看超出配额时会发生什么。

如何处理错误？


达到限制后该怎么办？当然，可以处理错误，无论是QuotaExceededError还是其他错误。然后，根据应用程序的设计，应选择处理方式。例如，您可以根据旧内容或数据的大小删除它们，或者为用户提供决定删除内容的能力。

超出配额时，IndexedDB和Cache API会引发DOMError QuotaExceededError。

索引数据库


达到限制后，将数据写入IndexedDB的尝试将失败。将以事件为参数调用onabort（）方法。该事件将在error属性中包含一个DOMException。检查错误名称将返回QuotaExceededError。

const transaction = idb.transaction(['entries'], 'readwrite')
transaction.onabort = function(event) {
    const error = event.target.error // DOMException
    if(error.name === 'QuotaExceededError') {
        // ...
    }
}

缓存API


达到限制时尝试将数据写入Cache API的尝试将被QuotaExceededError DOMException拒绝。

try {
    const cache = await caches.open('my-cache')
    await cache.add(new Request('/sample1.jpg'))
} catch (error) {
    if(error.name = 'QuotaExceededError') {
        // ...
    }
}

存储清理如何工作？


Web存储库分为两类，“独立”和“托管”。独立意味着可以在没有用户干预的情况下通过浏览器清除存储库，但是它对于长时间使用以及存在关键数据的适应性较差。托管保管库满时不会自动清除。用户必须手动清除此类存储（通过浏览器设置）。

默认情况下，Web存储（IndexedDB，Cache API等）属于独立类别，这意味着如果未安装手动控制，浏览器可以在特定条件下（例如在填充时）独立清除存储。

清洁存储的条件如下：

  • 当存储空间已满时，Chrome会从请求次数最少（使用时间最早）开始删除数据，直到解决溢出问题为止。
  • IE 10+不会清除存储，但是会阻止写入数据的功能。
  • Firefox与Chrome具有相同的功能。
  • Safari以前没有清空库，而是最近增加了7天的数据保留期。

从iOS和iPad 13.4，macOS上的Safari 13.1开始，数据保留期为7天。这意味着，如果用户在七天内没有访问数据，则将其删除。此策略不适用于添加到主屏幕的应用程序。

奖励：对IndexedDB的承诺包装


IndexedDB是一个低级API，在使用前需要进行一些配置，如果您需要存储简单数据，则可能没有必要。与大多数现代的基于Promise的API不同，它是基于事件的。来自诺言的包装（例如idb）隐藏了该存储库的一些强大功能，但更重要的是，它还隐藏了其复杂的内部机制（事务，版本控制）。

结论


有限的存储时间和增加权限的用户许可请求已被遗忘。站点可以有效地存储其工作所需的所有资源和数据。使用StorageManager API，您可以确定已使用多少内存以及剩余多少内存。通过将存储置于手动控制模式，可以保护数据不被删除。

注意 每个。：

  • 在这里，您可以看到如何使用idb编写笔记应用程序。
  • 在这里，您可以看到服务人员的工作方式。

感谢您的时间。我希望它花得很好。

More articles:


All Articles