Web Storage与IndexedDB存储_web storage 和 indexeddb-CSDN博客

本文链接：https://blog.csdn.net/weixin_47000834/article/details/138837429

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");