浏览器用户文件夹详解 - IndexdDB(十三)

守城小轩

于 2024-08-08 10:00:07 发布

阅读量251

点赞数 3

分类专栏：指纹浏览器文章标签： chrome devtools chrome 浏览器开发指纹浏览器

本文链接：https://blog.csdn.net/qqyy_sj/article/details/141019012

版权

指纹浏览器专栏收录该内容

17 篇文章 0 订阅

订阅专栏

1.IndexedDB 数据库

1.1 什么是IndexedDB？

IndexedDB是现代浏览器中提供的一种本地数据库技术，允许Web应用程序在用户的浏览器中存储大量结构化数据。与传统的cookie和localStorage相比，IndexedDB具有更高的存储容量和更强的数据管理能力，适用于需要存储大量数据的复杂Web应用。

1.2 IndexedDB的用途和重要性

IndexedDB在Web开发中具有以下几个重要用途：

本地数据存储：允许Web应用程序在用户设备上存储大量数据，支持离线访问和操作。
数据持久化：即使用户关闭浏览器或重启设备，数据仍然保留。
复杂查询和事务：支持复杂的数据查询和事务处理，类似于关系型数据库。

2.Chromium中的IndexedDB

2.1 IndexedDB的存放位置

在Chromium浏览器中，IndexedDB数据库存储在用户数据文件夹下。具体路径因操作系统而异，例如：

Windows: %LocalAppData%\\Google\\Chrome\\User Data\\Default\\IndexedDB
macOS: ~/Library/Application Support/Google/Chrome/Default/IndexedDB
Linux: ~/.config/google-chrome/Default/IndexedDB

2.2 IndexedDB的结构

IndexedDB数据库由多个对象存储（Object Store）组成，每个对象存储类似于关系型数据库中的表。每个对象存储包含多个记录，每条记录由一个键（Key）和一个值（Value）组成。IndexedDB支持多种数据类型，包括字符串、数字、对象等。

2.3 使用方式解析

可以进入给出的实例网站[indexedDB](https://dbtest.lyy1107zzz.workers.dev/)来查看并使用IndexedDB。

我们可以按住Ctrl+Shift+i来打开开发者工具来验证一下。

可以看到正确添加进去了。

这里也贴上网站的HTML代码，如果网站访问不了可在本地运行。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>IndexedDB 示例</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f0f0f0;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }
        .container {
            background-color: #fff;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            width: 300px;
            text-align: center;
        }
        h1 {
            color: #333;
        }
        form {
            display: flex;
            flex-direction: column;
        }
        label {
            margin: 10px 0 5px;
            color: #555;
        }
        input {
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 5px;
            margin-bottom: 10px;
        }
        button {
            padding: 10px;
            border: none;
            border-radius: 5px;
            background-color: #007BFF;
            color: #fff;
            cursor: pointer;
            margin-top: 10px;
        }
        button:hover {
            background-color: #0056b3;
        }
        pre {
            text-align: left;
            background-color: #f8f8f8;
            padding: 10px;
            border-radius: 5px;
            border: 1px solid #ccc;
            margin-top: 10px;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>IndexedDB 示例</h1>
        <form id="dataForm">
            <label for="key">键:</label>
            <input type="text" id="key" name="key" required>
            <label for="value">值:</label>
            <input type="text" id="value" name="value" required>
            <button type="submit">添加数据</button>
        </form>
        <button id="getAllData">获取全部数据</button>
        <pre id="output"></pre>
    </div>

    <script>
        const dbName = 'myDatabase';
        const storeName = 'myStore';

        // 打开或创建数据库
        const request = indexedDB.open(dbName, 1);

        request.onupgradeneeded = function(event) {
            const db = event.target.result;
            db.createObjectStore(storeName, { keyPath: 'key' });
        };

        request.onsuccess = function(event) {
            const db = event.target.result;

            document.getElementById('dataForm').onsubmit = function(event) {
                event.preventDefault();
                const key = document.getElementById('key').value;
                const value = document.getElementById('value').value;

                const transaction = db.transaction([storeName], 'readwrite');
                const store = transaction.objectStore(storeName);
                store.put({ key, value });

                transaction.oncomplete = function() {
                    alert('数据已添加');
                };

                transaction.onerror = function() {
                    alert('添加数据时出错');
                };
            };

            document.getElementById('getAllData').onclick = function() {
                const transaction = db.transaction([storeName], 'readonly');
                const store = transaction.objectStore(storeName);
                const request = store.getAll();

                request.onsuccess = function(event) {
                    document.getElementById('output').textContent = JSON.stringify(event.target.result, null, 2);
                };

                request.onerror = function() {
                    alert('获取数据时出错');
                };
            };
        };

        request.onerror = function() {
            alert('打开数据库时出错');
        };
    </script>
</body>
</html>

3.IndexedDB的管理机制

3.1 数据库的创建和打开

在Web应用程序中，可以通过JavaScript代码创建和打开IndexedDB数据库。例如：

let request = indexedDB.open("myDatabase", 1);

request.onupgradeneeded = function(event) {
  let db = event.target.result;
  let objectStore = db.createObjectStore("myObjectStore", { keyPath: "id" });
};

request.onsuccess = function(event) {
  let db = event.target.result;
  console.log("Database opened successfully");
};

request.onerror = function(event) {
  console.error("Database error: " + event.target.errorCode);
};

3.2 数据的读写操作

IndexedDB支持多种数据操作，包括添加、读取、更新和删除。例如：

// 添加数据
let transaction = db.transaction(["myObjectStore"], "readwrite");
let objectStore = transaction.objectStore("myObjectStore");
let request = objectStore.add({ id: 1, name: "John Doe" });

request.onsuccess = function(event) {
  console.log("Data added successfully");
};

// 读取数据let request = objectStore.get(1);

request.onsuccess = function(event) {
  let data = event.target.result;
  console.log("Data retrieved: ", data);
};

3.3 数据的查询和事务

IndexedDB支持复杂的数据查询和事务处理。例如：

// 查询数据
let index = objectStore.index("name");
let request = index.get("John Doe");

request.onsuccess = function(event) {
  let data = event.target.result;
  console.log("Data retrieved: ", data);
};

// 事务处理
let transaction = db.transaction(["myObjectStore"], "readwrite");

transaction.oncomplete = function(event) {
  console.log("Transaction completed successfully");
};

transaction.onerror = function(event) {
  console.error("Transaction error: " + event.target.errorCode);
};

4.结语

通过本文的探讨，我们对Chromium浏览器中的IndexedDB数据库有了更深入的认识。我们了解了IndexedDB在本地数据存储、数据持久化和复杂查询中的重要作用，以及其在Web开发中的具体应用。

在下一篇文章中，我们会带来Local Storage的相关内容，敬请期待！

守城小轩

关注

3
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
浏览器用户文件夹详解 - IndexdDB(十三)

IndexedDB是现代浏览器中提供的一种本地数据库技术，允许Web应用程序在用户的浏览器中存储大量结构化数据。与传统的cookie和localStorage相比，IndexedDB具有更高的存储容量和更强的数据管理能力，适用于需要存储大量数据的复杂Web应用。通过本文的探讨，我们对Chromium浏览器中的IndexedDB数据库有了更深入的认识。我们了解了IndexedDB在本地数据存储、数据持久化和复杂查询中的重要作用，以及其在Web开发中的具体应用。
复制链接

扫一扫

专栏目录