Web Storage和IndexedDB都是用于在客户端存储数据的Web API。

Web Storage提供了一种简单的键值对存储机制，可以在浏览器上存储和读取数据。它分为两种类型：sessionStorage和localStorage。sessionStorage用于存储会话级别的数据，当会话结束时数据将被清除。而localStorage用于存储持久化的数据，数据可以跨会话和浏览器重启进行访问。

IndexedDB则提供了更强大和灵活的数据库式存储机制。它是一个NoSQL数据库，在浏览器中可以存储结构化的数据，并支持复杂的查询和事务操作。IndexedDB适用于存储大量数据和需要进行复杂查询的场景，比如离线使用和缓存数据。

总结来说，Web Storage适用于简单的键值对存储需求，而IndexedDB适用于复杂的数据存储和查询需求。

下面是一个使用Web Storage和IndexedDB存储数据的简单示例：

使用Web Storage存储数据：

  


  
  保存数据
  显示数据
  

使用IndexedDB存储数据：

  


  
  保存数据
  显示数据
  

这些示例分别演示了如何使用Web Storage和IndexedDB存储数据，并通过控制台输出结果。请注意，在使用IndexedDB之前，需要先创建数据库和对象存储空间。