localStorage，当内存填满时更好的处理答案

【问题标题】：localStorage, better handling when memory fills uplocalStorage，当内存填满时更好的处理
【发布时间】：2014-04-24 06:24:05
【问题描述】：

我正在编写一个派生大量图像数据的应用程序，这样做需要花费一些时间，而在此期间用户正在等待。当我导出数据时，我想存储它以防用户想很快再次看到它。我一直在使用 html5 中的一些本地存储方法，对我来说最有希望的似乎是 localStorage。 localstorage 的一个缺点是它往往不允许存储那么多数据，在大多数情况下是 5Mb，我的想法是每次我导出一些数据时，将其存储在 localStorage 中。当那些可怜的小 5MB 被填满时，问题就出现了，然后我想从内存中删除最旧的元素，但是似乎没有简单的方法可以做到这一点，因为所有内容都存储在键值对中。

所以我不太确定在这种情况下如何继续使用 localStorage。是否有任何模块或东西可以使以上述方式使用 localStorage 更容易？

【问题讨论】：

Calculating usage of localStorage space 的可能重复项
不是关于计算有多少存储空间，我问的是如何最好地处理一个完整的 localStorage。
我的第一个想法是：不要使用localStorage进行缓存。看起来你想缓存图片，已经有一个很好的方法，使用 HTTP 缓存头。
感谢您提供的信息，我将研究 http 缓存。
事情是我正在浏览视频文件，在给定时间拍摄视频快照，将生成的图像粘贴到画布上，然后从那里粘贴到图像上。所以当用户向服务器发出请求时，这些图像永远不会真正存在，所以我不确定 http 缓存如何解决这个问题。

标签： javascript html local-storage

【解决方案1】：

你可以使用 1) IndexedDB 用于存储大量数据，但只能在除 Opera mini 之外的最新浏览器中使用。 2）或者，将您的数据存储在内存中，然后再存储到本地存储中，反之亦然。 3）您始终可以将时间标签与您存储的每个密钥一起放置。您可以遍历具有特定格式的密钥以获取存储中最旧的密钥，并且可以轻松删除它。 4）您还可以将时间戳与图像数据一起放入数据中，在这种情况下，您不必提取所有键，而是从存储中提取完整的数据对象。

我建议您使用 IndexedDB 选项来克服您的大小限制。

希望这会有所帮助。

【讨论】：

数字 3 是我刚刚想做的。

【解决方案2】：

最后我使用了这个模块：https://gist.github.com/ragnar-johannsson/10509331。如果没有足够的内存来添加新值，则使用它会删除最旧的值。

【讨论】：