localStorage与indexedDB有何不同？

localStorage和indexedDB用于脱机存储HTML5中的数据。它们的主要区别是什么，在哪种情况下更可取？

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

localStorage或更准确地说是Web Storage旨在用于少量数据。它本质上是一个仅字符串的键值存储，具有简单的同步 API。最后一部分是关键。尽管规范中没有禁止异步DOM存储的内容，但是当前所有实现都是同步的（即阻止请求）。即使您不介意使用朴素键-值存储大量数据，客户也将永远等待应用程序加载。

另一方面，indexedDB旨在处理大量数据。首先，从理论上讲，它同时提供了同步和异步API。但是，实际上，所有当前实现都是异步的，并且请求不会阻止用户界面的加载。此外，IndexedDB的，正如其名称显示，提供索引。您可以在数据库上运行基本查询，并通过在特定键范围内查找键来获取记录。indexedDB还支持事务，并提供简单的类型（例如Date）。

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

归根结底，如果您在应用程序中使用Web Storage或indexedDB，或两者同时使用，则完全由您决定。Web存储的一个好用例是存储简单的会话数据（例如用户名），然后将一些请求保存到实际数据库中。另一方面，indexedDB的其他功能可以帮助您存储应用程序脱机工作所需的所有数据。

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

1. 在某些情况下，例如Service Workers，您不能使用阻塞代码，因此，您不能使用localStorage，而必须使用诸如indexedDB之类的东西。

2. 用于indexedDB的API既复杂又乏味（我什至会说“恐怖”，YMMV）。有几个用于简化API的“包装器”库，我强烈建议您看一下。

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

来自MDN的报价：

The keys and the values are always strings.

关于IndexedDB：

Any objects supported by the structured clone algorithm can be stored:  
All primitive types However not symbols
Boolean object   
String object    
Date     
RegExp  The lastIndex field is not preserved.
Blob     
File     
FileList     
ArrayBuffer  
ArrayBufferView This basically means all typed arrays like Int32Array etc.
ImageData    
Array    
Object  This just includes plain objects (e.g. from object literals)
Map  
Set