html - 当 localStorage 已满时会发生什么？

Question

我找到了 articles关于缓存行为，所以我只能假设它没有太大不同，但我想确定一下。

我了解到大多数浏览器为 localStorage 分配了 5MB(或多或少)，我对浏览器的行为很感兴趣？

我知道每个浏览器的行为都不同，但我最感兴趣的是 Safari、Chrome 和 Firefox(因为我认为这些是浏览器)。

• 上述浏览器会从我的网站上删除数据还是会选择“最旧的”或类似的东西？
• 在这种情况下我的元素会被保存吗？

最重要的是:

• 假设我“滥用”了我网站上的 localStorage，试图将其全部用完，而在同一页面中，我正在填充它并试图保存更多。我会收到警告吗？ getItem 会在发生这种情况时返回 null 还是以某种方式保存在内存中？

• 如果我尝试保存大于 localStorage 大小的项目会怎样？

已回答:可以找到答案here

• 是否可以从据称应该相同的 sessionStorage 中获得完全相同的行为？

我知道有很多问题，但我正在尝试了解与该主题相关的所有内容，如果您能回答问题的任何部分，我将不胜感激。

Answer 1

首先，一些有用的资源:

• WebStorage Support Test - 有一个比较数据存储配额的表格在浏览器之间。
• SimplelocalStorage quota test
• Summary of localStorage browser behaviour
• W3C spec - 指示用户代理(例如浏览器)的行为方式(localStorage 和 sessionStorage)。

在回答您的问题时，桌面浏览器的初始最大 localStorage 配额往往为每个域 5MB。在某些情况下，这可以由用户进行调整:

• Opera:opera:config -> localStorage 的域配额
• Firefox:关于:配置 -> dom.storage.default_quota

在 Chrome 中，用户似乎无法调整此设置，尽管与 Opera 一样，localStorage 数据可以使用开发者工具直接按域进行编辑。

当您尝试在 localStorage 中存储数据时，浏览器会检查当前域是否有足够的剩余空间。如果是:

• 数据被存储，如果相同的键已经存在则覆盖值。

如果没有:

• 不会存储数据，也不会覆盖现有数据。
• QUOTA_EXCEEDED_ERR 异常被抛出。

在这种情况下，getItem(key) 将返回成功存储的最后一个值(如果有的话)。

(Opera 略有不同，它会显示一个对话框，让用户选择增加当前域的存储空间。)

请注意，sessionStorage 和 localStorage 都是同一个 Storage 对象的实现，因此它们的行为相似，错误处理也相同。