localStorage和indexedDB用于脱机存储HTML5中的数据。它们的主要区别是什么,在哪种情况下更适合?

评论

亲密的选民:虽然我完全理解这似乎是“主要基于意见”的观点(原始版本中的“ vs”无济于事),但这两种技术截然不同,因此有客观的理由选择另一种。 user221287对问题的主题进行一些最少的先验研究,然后在提出问题之前对所涉及的概念有基本的了解,很可能会避免您日后投票失败并获得投票。
您可以在以下不同的存储选项之间以及跨浏览器测试性能:nolanlawson.github.io/database-comparison(归功于Nolan Lawson)

#1 楼

从表面上看,这两种技术似乎可以直接比较,但是如果您花一些时间与它们在一起,您很快就会意识到它们不是。它们被设计为实现类似的目标,即客户端存储,但是它们从截然不同的角度来处理手头的任务,并且在处理不同数量的数据时效果最佳。

localStorage或更准确地说是Web Storage,为少量数据而设计。它本质上是一个仅字符串的键-值存储,具有简单的同步API。最后一部分是关键。尽管规范中没有任何内容禁止异步Web存储,但是当前所有实现都是同步的(即阻止请求)。即使您不介意使用朴素的键-值存储大量数据,您的客户也将永远等待应用程序的加载。另一方面,indexedDB旨在处理大量数据。首先,从理论上讲,它提供了同步和异步API。但是,实际上,所有当前的实现都是异步的,并且请求不会阻止用户界面的加载。此外,顾名思义,indexedDB提供索引。您可以在数据库上运行基本查询,并通过在特定键范围内查找键来获取记录。 indexedDB还支持事务,并提供简单的类型(例如Date)。

在这一点上,indexedDB似乎对于任何情况都将是一种更好的解决方案。但是,它的所有功能都会受到影响:与Web Storage相比,其API相当复杂。 indexedDB假定您对数据库概念已经很熟悉,而使用Web Storage则可以直接进入。如果您曾经使用过cookie,那么使用Web Storage不会遇到任何问题。同样,通常,您需要在indexedDB中编写更多代码以实现与Web存储完全相同的结果(更多代码=更多错误)。此外,为不支持Web浏览器的浏览器模拟Web存储相对简单。使用indexedDB,该任务将不值得花时间。最后,在进入indexedDB之前,您应该首先查看Quota API。

最后,完全取决于您是使用Web Storage还是使用indexedDB,或同时使用这两者,在您的应用程序中。 Web存储的一个好用例是存储简单的会话数据(例如用户名),并将一些请求保存到实际数据库中。另一方面,indexedDB的其他功能可以帮助您存储应用程序脱机工作所需的所有数据。

评论


此外,仅最近的浏览器支持IndexedDB:IE 10 +,Chrome 23 +,Firefox 10 +,Opera 15+和Android 4.4+。

– David Harkness
2014年3月19日在18:41

@ yannis,DOM存储和Web存储之间有什么区别吗?

– SandroMarques
17年4月23日在15:20

否,关闭浏览器后不会删除localStorage。仅当您以编程方式或手动方式(例如在浏览器的开发工具中)进行操作时,它才会清除。但是,另一个SO线程中的某人声称,他在更新Chrome时已清除了该漏洞。

–ultrageek
20年5月10日19:30



sessionStorage是关闭浏览器时删除的一个。

–特拉维斯·沃森(Travis Watson)
20年5月14日在13:40

更具体地说,当关闭选项卡时,sessionStorage将被删除,并且每个浏览器选项卡都具有自己的单独的sessionStorage,因此即使在同一主机名上,也无法跨多个选项卡共享sessionStorage实例。

–钻石海
20-10-28在16:04



#2 楼

@yannis的答案非常好。只想添加几件事。


在某些情况下,例如Service Workers,您不能使用阻塞代码,因此,您不能使用localStorage,而必须使用诸如indexedDB之类的东西。
用于indexedDB的API既复杂又乏味(我会说YMMV太“恐怖”了)。有几个用于简化API的“包装器”库,我强烈建议您看看这些。


评论


不能使用localStorage和阻塞代码,是否可以用Promise包装阻塞代码并使之成为非阻塞代码?

– joedotnot
19-09-15在11:56

@joedotnot有趣的想法,可以简化我的生活。你试过了吗?

–user949300
20-11-20在21:36

#3 楼

对我来说,我发现我可以将Blob存储在IndexedDB中,而在localStorage中,我只能存储字符串。这意味着IndexedDB更适合图像,音频,视频等二进制数据。是的,我们可以将图像存储在localStorage的base64中,但是blob会变得更小且更快,因为我们不需要对其进行解码。 />
关于IndexedDB:

The keys and the values are always strings.