Web Storage与IndexedDB存储

Shero.李建业

于 2024-05-14 09:19:35 发布

阅读量477

点赞数 14

分类专栏： JavaScript技术文章标签：前端

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

版权

JavaScript技术专栏收录该内容

73 篇文章 0 订阅

订阅专栏

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之前，需要先创建数据库和对象存储空间。