Web Storage和IndexedDB都是用于在客户端存储数据的Web API。
Web Storage提供了一种简单的键值对存储机制，可以在浏览器上存储和读取数据。它分为两种类型：sessionStorage和localStorage。sessionStorage用于存储会话级别的数据，当会话结束时数据将被清除。而localStorage用于存储持久化的数据，数据可以跨会话和浏览器重启进行访问。
IndexedDB则提供了更强大和灵活的数据库式存储机制。它是一个NoSQL数据库，在浏览器中可以存储结构化的数据，并支持复杂的查询和事务操作。IndexedDB适用于存储大量数据和需要进行复杂查询的场景，比如离线使用和缓存数据。
总结来说，Web Storage适用于简单的键值对存储需求，而IndexedDB适用于复杂的数据存储和查询需求。
下面是一个使用Web Storage和IndexedDB存储数据的简单示例：
使用Web Storage存储数据：
<!DOCTYPE html> <html> <head> <title>Web Storage Demo</title> </head> <body> <input type="text" id="dataInput" placeholder="输入数据"> <button onclick="saveData()">保存数据</button> <button onclick="showData()">显示数据</button> <script> function saveData() { var data = document.getElementById("dataInput").value; localStorage.setItem("data", data); console.log("数据已保存到localStorage"); } function showData() { var data = localStorage.getItem("data"); console.log("从localStorage读取到的数据：" + data); } </script> </body> </html>
使用IndexedDB存储数据：
<!DOCTYPE html> <html> <head> <title>IndexedDB Demo</title> </head> <body> <input type="text" id="dataInput" placeholder="输入数据"> <button onclick="saveData()">保存数据</button> <button onclick="showData()">显示数据</button> <script> var request = window.indexedDB.open("myDatabase", 1); var db; request.onupgradeneeded = function(event) { db = event.target.result; var objectStore = db.createObjectStore("dataStore", { keyPath: "id" }); }; request.onsuccess = function(event) { db = event.target.result; }; function saveData() { var data = document.getElementById("dataInput").value; var transaction = db.transaction(["dataStore"], "readwrite"); var objectStore = transaction.objectStore("dataStore"); var request = objectStore.add({ id: 1, data: data }); request.onsuccess = function(event) { console.log("数据已保存到IndexedDB"); }; } function showData() { var transaction = db.transaction(["dataStore"], "readonly"); var objectStore = transaction.objectStore("dataStore"); var request = objectStore.get(1); request.onsuccess = function(event) { var data = event.target.result.data; console.log("从IndexedDB读取到的数据：" + data); }; } </script> </body> </html>
这些示例分别演示了如何使用Web Storage和IndexedDB存储数据，并通过控制台输出结果。请注意，在使用IndexedDB之前，需要先创建数据库和对象存储空间。
