【前端面试】一篇讲透客户端存储——IndexedDB、Cookie……

贾明恣

已于 2024-08-20 16:44:09 修改

阅读量1.1k

点赞数 25

文章标签：前端面试职场和发展

于 2024-08-20 14:26:19 首次发布

本文链接：https://blog.csdn.net/weixin_43342290/article/details/141278302

版权

存储空间

IndexedDB 是一种在用户浏览器中运行的客户端存储技术，它允许网页应用程序存储大量结构化数据。IndexedDB 存储空间的底层实际上是使用用户的本地文件系统来存储数据的。

以下是一些关于 IndexedDB 存储空间的底层细节：

文件系统：IndexedDB 数据存储在用户的文件系统中，但具体位置对于用户来说是抽象的，并且由浏览器管理。
浏览器管理：浏览器为每个域（或称为源）创建和管理一个或多个数据库文件。这些文件通常位于用户的个人文件夹中，例如 ~/.local/share 在 Linux 上，或者在 Windows 上的 AppData 目录下。
安全性：IndexedDB 受到同源策略的限制，只有创建它的域可以访问这些数据。
存储限制：虽然 IndexedDB 提供了比传统 Cookie 和 Web Storage（localStorage 和 sessionStorage）更大的存储空间，但它仍然有存储限制。这些限制通常是基于用户磁盘空间的百分比来动态计算的。
临时和持久存储：IndexedDB 支持临时存储和持久存储。持久存储的数据会一直保留，直到用户或浏览器显式删除它们。临时存储的数据可能会在浏览器需要释放空间时被自动删除。
数据格式：IndexedDB 存储的数据是结构化的，可以是字符串、二进制数据、对象等。数据通过对象存储（Object Stores）和索引（Indexes）进行组织，以便于高效查询。
事务性：IndexedDB 提供了事务性的数据读写操作，确保数据的一致性和完整性。
隐私模式：在某些浏览器的隐私或无痕模式下，IndexedDB 的使用可能会受到限制，数据可能不会被保存。
跨浏览器：不同浏览器可能在 IndexedDB 的实现细节上有所不同，但核心概念和 API 是一致的。
用户清理：用户可以通过浏览器的设置或使用第三方工具清理 IndexedDB 数据。

总的来说，IndexedDB 的存储空间是浏览器在用户的设备上管理的一部分文件系统，专门用于存储网页应用程序的数据。

IndexedDB API

存储代码示例

打开或创建数据库：

var request = window.indexedDB.open('myDatabase', 1);
request.onupgradeneeded = function(event) {
     
    var db = event.target.result;
    if (!db.objectStoreNames.contains('store')) {
     
        db.createObjectStore('store', {
     keyPath: 'id'});
    }
};
request.onsuccess = function(event) {
     
    var db = event.target.result;
    console.log('Database opened successfully');
};
request.onerror = function(event) {
     
    console.error('Database error:', event.target.error);
};

添加数据到对象存储：

function addData(db, storeName, data) {
     
    var transaction = db.transaction([storeName], 'readwrite');
    var store = transaction.objectStore(storeName);
    var request =