首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何以编程方式获取indexedDB中每个objectStore的当前数据大小?

IndexedDB是一种浏览器内置的客户端数据库,用于在Web应用程序中存储大量结构化数据。要以编程方式获取indexedDB中每个objectStore的当前数据大小,可以按照以下步骤进行操作:

  1. 打开或创建indexedDB数据库:
    • 使用indexedDB.open(databaseName, version)方法打开或创建一个indexedDB数据库,其中databaseName是数据库的名称,version是数据库的版本号。
  • 创建objectStore:
    • 在数据库的onupgradeneeded事件中,使用createObjectStore(objectStoreName, options)方法创建一个objectStore,其中objectStoreName是objectStore的名称,options是一个包含可选参数的对象,用于指定键路径、自动递增等选项。
  • 获取objectStore的当前数据大小:
    • 使用transaction()方法创建一个事务对象,并指定要访问的objectStore。
    • 使用objectStore.count()方法获取objectStore中的记录数量。
    • 使用objectStore.openCursor()方法打开一个游标,并遍历objectStore中的每个记录。
    • 对于每个记录,可以通过cursor.value属性获取记录的值,并使用JSON.stringify()方法将其转换为字符串。
    • 使用new Blob([stringData])方法将字符串数据转换为Blob对象。
    • 使用blob.size属性获取Blob对象的大小,即当前记录的数据大小。
    • 累加每个记录的数据大小,即可得到objectStore的当前数据大小。

以下是一个示例代码,用于获取indexedDB中每个objectStore的当前数据大小:

代码语言:txt
复制
const databaseName = "myDatabase";
const objectStoreName = "myObjectStore";

function getObjectStoreDataSize() {
  return new Promise((resolve, reject) => {
    const request = indexedDB.open(databaseName);
    
    request.onerror = (event) => {
      reject("Failed to open database");
    };
    
    request.onsuccess = (event) => {
      const db = event.target.result;
      const transaction = db.transaction(objectStoreName, "readonly");
      const objectStore = transaction.objectStore(objectStoreName);
      const cursorRequest = objectStore.openCursor();
      let dataSize = 0;
      
      cursorRequest.onsuccess = (event) => {
        const cursor = event.target.result;
        
        if (cursor) {
          const stringData = JSON.stringify(cursor.value);
          const blob = new Blob([stringData]);
          dataSize += blob.size;
          cursor.continue();
        } else {
          resolve(dataSize);
        }
      };
      
      cursorRequest.onerror = (event) => {
        reject("Failed to open cursor");
      };
    };
    
    request.onupgradeneeded = (event) => {
      const db = event.target.result;
      db.createObjectStore(objectStoreName);
    };
  });
}

getObjectStoreDataSize()
  .then((dataSize) => {
    console.log("ObjectStore data size:", dataSize);
  })
  .catch((error) => {
    console.error(error);
  });

请注意,以上代码仅为示例,实际应用中可能需要根据具体情况进行适当的修改和优化。

对于indexedDB的更多信息和使用方法,可以参考腾讯云的相关文档和示例代码:

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

浏览器里本地数据库:IndexedDB

IndexedDB 主要概念 IndexedDB 是一个比较复杂 API 组合,学习它过程就相当于学习它各个对象 API 接口,包括以下这些( IDB 指当前操作数据库实例 ): 数据库:IDBDatabase...在同源策略( 协议 + 域名 + 端口 )前提下,每个域名下可以新建任意多数据库。IndexedDB 中有版本概念,这就规定了同一时刻下只有一个版本数据库存在。...对象仓库:对象仓库 ObjectStoreIndexedDB 对应是 MYSQL 表 Table。...= objectStore.get(1); // 获取成功后替换当前数据 objectStoreRequest.onsuccess = function(event) { // 数据 var...来检查回收错误 有较好错误日志机制, 失败,冲突等等,方便调试 库大小为 255b 这两个类库比较符合我们开发要求,我们当前使用是 LocalForage。

1.3K10

Web 中使用 IndexedDB 实现缓存

上面说到常见缓存技术,简单来说: Cookie 缓存数据可跟服务端进行交互信息,但是大小不超过 4KB。 LocalStorage 将信息字符串化后存储,大小一般几兆。是一种同步操作。...IndexedDB 相对前面提及缓存,其存储空间远远比它们大: 存储空间超大。具体是多大?这取决于你硬盘大小。一般是你硬盘大小 1/2。...本案例实现效果,如下图: 案例完成功能有: 连接 IndexedDB 并创建对象(表)及索引 获取记录列表信息。...也就是图中 table 数据 增加列表数据,更新 IndexedDB 数据 编辑列表数据,更新 IndexedDB 数据 删除列表数据,更新 IndexedDB 数据 选中列表一条数据...,从 IndexedDB 读取并展示在 当前选中 位置 案例采用 UI 框架是 Ant Design of Angular 代码即文档,详细代码和解析如下: <!

1.2K20

IndexedDB 打造靠谱 Web 离线数据

增删数据IndexedDB 里面进行数据增删,都需要在 transaction 完成。...之后又刷新网页命中了另一台未上线机器,连接了旧版本1 出错。主要原因是: indexedDB API 不允许数据数据仓库在同一版本中发生变化....参考: 版本更替 版本更新 这个在 IndexDB 是一个很重要问题。主要原因在于 indexedDB API 不允许数据数据仓库在同一版本中发生变化....在 indexedDB ,我们一共可以通过三种方式来索引数据: 固定 key 值 索引外键(index) 游标(cursor) 固定 key 索引 IDBObjectStore 提供给了我们直接通过...每个数据库必须包含以下内容: 名字(Name): 它标识了一个特定源数据库,并且在数据整个生命周期内保持不变. 此名字可以为任意字符串值(包括空字符串). 当前版本(version).

3K30

前端存储技术

前言 后端常用数据库做数据存储,譬如MySql、MongoDB,缓存技术存储数据Redis、Memcached; 前端存储数据目前常用是Cookie、Storage、IndexedDB Cookie...分类 Cookie总是保存在客户端(早期Java中经常会将Cookie与Session作为存储技术进行比较,Session是将数据保存在服务器端,大量数据存储会增加服务器负担),按在客户端存储位置...var cookies = document.cookie; Cookie缺点 Cookie会被附加在每个HTTP请求,所以无形增加了流量。...由于在HTTP请求Cookie是明文传递,所以安全性成问题,除非用HTTPS。 Cookie大小限制在4KB左右,对于复杂存储需求来说是不够用。...IndexedDB 随着浏览器功能不断增强,越来越多网站开始考虑,将大量数据储存在客户端,这样可以减少从服务器获取数据,直接从本地获取数据

1.9K40

IndexedDB使用与出坑指南

在浏览器提供数据,共有web sql和IndexedDB两种。相较于HTML5已经废弃web sql来说,更推荐大家使用IndexedDB。...类比sql型数据库,IndexedDBDB(数据库)就是sqlDB,而Object Store(存储空间)则是数据表,Item则等于表一条记录。...查找数据 通过特定值获取数据 当我们需要从存储空间获取数据时,我们可以通过以下方法: var request = window.indexedDB.open('test', 1); request.onsuccess...value能够接受数据类型 在IndexedDB,value能够接受ECMA-262所有的类型值,例如String,Date,ImageDate等。...访问权限 部分浏览器Safari手机版隐私模式在访问IndexedDB时,可能会出现由于没有权限而导致异常(LocalStorage也会),需要进行异常处理。

7.8K53

前端下载超大文件完整方案

在分片下载过程每个下载文件块(chunk)都需要在客户端进行缓存或存储,方便实现断点续传功能,同时也方便后续将这些文件块合并成完整文件。...这些文件块可以暂时保存在内存或者存储在客户端本地存储( IndexedDB、LocalStorage 等)。 一般情况下,为了避免占用过多内存,推荐将文件块暂时保存在客户端本地存储。...,包括 LocalStorage、IndexedDB 和其他存储机制数据。...这个类封装了 IndexedDB 常用操作,包括打开数据库、添加数据、通过 ID 获取数据获取全部数据、更新数据、删除数据和删除数据表。...('数据保存成功'); // 获取数据 const value = await localforage.getItem('key'); console.log('获取数据

56710

【缓存】HTML5缓存那些事

,通常在浏览器(客户端)使用cookies来存储客户端内容; cookies特点: 每次http请求头中,都会带有cookies——缺点; 每个域名只能存储4K大小cookies; 主域名污染:...上加一层处理过期机制; 各个子域名之间不能共享存储数据;(借助H5postMessage()这个API做一些跨域上得处理) 超出存储大小之后如何存储——使用一些LRU、FIFO算法去淘汰一些旧数据...,减少网络传输 在弱网络环境下,会发生高延迟,低带宽,应该尽量把数据脚本、样式)本地化; 我们来看一张图,显示是本地存储和网络拉取耗时对比: IndexedDB 概念 IndexedDB,是一种能做浏览器持久地存储结构化数据数据库...,每个数据库可以创建对个对象存储空间(表/table),一个对象存储空间可以存储多个对象数据; 如图: 使用IndexedDB实现离线数据库 这里我们主要从IndexedDB 四大功能入手: 增删改...transaction.objectStore(tableName);//通过事物获取表中一个objectStore对象,即表对象 //遍历表记录——游标-openCursor,这是indexedDb

36150

【javascript】谈谈HTML5: Web-Worker、canvas、indexedDB、拖拽事件

worker脚本传递数据,那么同样道理,我们也能从work脚本向当前任务脚本传递数据方式相同) 例子: ├─worker.js        ├─main.js       └─index.html...正是我们想要图片 indexedDB — — H5“浏览器数据库” indexedDB是存在于浏览器数据库,它和一般数据库一样有写改删查功能,不同之处在于:常见数据库一般是在服务器上,并且要求我们应用在线时才可以工作...通过索引查找 我们通过objectStore.get方法,通过查找主键方式查找对应对象数据方式是很快。...这里首先需要知道是,当我们拖动一个图片到另一个地方时候,我们是不能“直接把图片拖拽进去”,也就是说,我们还是要通过以下思路实现拖放: 在被放置元素取得被拖拽元素相关数据id),然后通过...appendChild之类API实现添加被拖拽元素,从而模拟整个拖拽过程 也就是说, 拖拽其实可分为三个过程: 拖动—传递被拖动元素数据id)—在容器元素添加该元素 关键在于如何在被拖动元素和被放置元素传递数据

3.1K30

【javascript】谈谈HTML5—Web Worker+canvas+indexedDB+拖拽事件

worker脚本传递数据,那么同样道理,我们也能从work脚本向当前任务脚本传递数据方式相同) 例子: ├─worker.js        ├─main.js       └─index.html...正是我们想要图片 indexedDB — — H5“浏览器数据库” indexedDB是存在于浏览器数据库,它和一般数据库一样有写改删查功能,不同之处在于:常见数据库一般是在服务器上,并且要求我们应用在线时才可以工作...通过索引查找 我们通过objectStore.get方法,通过查找主键方式查找对应对象数据方式是很快。...这里首先需要知道是,当我们拖动一个图片到另一个地方时候,我们是不能“直接把图片拖拽进去”,也就是说,我们还是要通过以下思路实现拖放: 在被放置元素取得被拖拽元素相关数据id),然后通过...appendChild之类API实现添加被拖拽元素,从而模拟整个拖拽过程 也就是说, 拖拽其实可分为三个过程: 拖动—传递被拖动元素数据id)—在容器元素添加该元素 关键在于如何在被拖动元素和被放置元素传递数据

3.7K100

javascript 操作浏览器数据IndexedDB

前言Indexed Database API 简称 IndexedDB,是浏览器存储结构化数据一个方案。IndexedDB 用于代替目前已废弃 Web SQL Database API。...IndexedDB 背后思想是创造一套 API,方便 JavaScript 对象存储和获取,同时也支持查询和搜索。IndexedDB 设计几乎完全是异步。...request.onupgradeneeded = (event) => { const db = event.target.result; // 如果存在则删除当前 objectStore。...例如,如果同时记录了用户 ID 和用户名,那可能需要通过任何一种方式获取用户数据。为此,可以考虑将用户 ID 作为主键,然后在用户名上创建索引。假定新建表格时候,对name字段建立了索引。...其次,每个源都有可以存储空间限制。当前 Firefox 限制是每个源 50MB,而 Chrome 是 5MB。移动版 Firefox 有 5MB 限制,如果用度超出配额则会请求用户许可。

10420

IndexedDB 基础

首先它存储空间大小只有 4K 其次它存储有效时间有限制 然后存在 Cookie 数据,在你每次进行请求时候都会将它带上,使得每次请求数据都会无意义增大 最重要一点,Cookies 设计之初就不是就是让前端存数据...每个域名(严格说,是协议 + 域名 + 端口)都可以新建任意多个数据库。IndexedDB 数据库有版本概念。同一个时刻,只能有一个版本数据库存在。...这是因为 IndexedDB API 不允许数据数据仓库在同一版本中发生变化。...接收一个参数,为需要保存到对象仓库对象 get(): 获取数据。接收一个参数,为需要获取数据主键值 delete(): 删除数据。...接收一个参数,为需要获取数据主键值 clear(): 清除记录。无参数 count(): 返回记录数量。接受 0 或一个参数,不带参数时,该方法返回当前对象仓库所有记录数量。

55220

JavaScript IndexedDB 完整指南

IndexedDB 用于在浏览器存储数据,对于需要离线工作 web 应用程序(大多数进步 web 应用程序)尤其重要。 首先,让我们介绍一下为什么需要将数据存储在 web 浏览器。...浏览器存储方式 关于如何在浏览器存储数据,Web 标准提供了三个主要 API: Cookies:此数据存储在浏览器,Cookies 大小限制为 4k。...LocalStorage/SessionStorage:LocalStorage / SessionStorage 是浏览器内置键值存储,其中每个大小限制为 5MB。...在这些方式,localStorage 是进行简单操作和存储少量数据好选择。对于更复杂或常规操作,IndexedDB 可能是更好选择,特别是在需要异步获取数据情况下。...request.onupgradeneeded 事件,当试图打开一个版本号高于数据当前版本号数据库时,该事件就会运行。

1.9K20

浏览器数据IndexedDB 入门教程

一、概述 随着浏览器功能不断增强,越来越多网站开始考虑,将大量数据储存在客户端,这样可以减少从服务器获取数据,直接从本地获取数据。...现有的浏览器数据储存方案,都不适合储存大量数据:Cookie 大小不超过4KB,且每次请求都会发送回服务器;LocalStorage 在 2.5MB 到 10MB 之间(各家浏览器不同),而且不提供搜索功能...(1)数据数据库是一系列相关数据容器。每个域名(严格说,是协议 + 域名 + 端口)都可以新建任意多个数据库。 IndexedDB 数据库有版本概念。同一个时刻,只能有一个版本数据库存在。...如果指定数据库不存在,就会新建数据库。第二个参数是整数,表示数据版本。如果省略,打开已有数据库时,默认为当前版本;新建数据库时,默认为1。...'); } }; } read(); 上面代码objectStore.get()方法用于读取数据,参数是主键值。

70810

浏览器数据IndexedDB入门

一、概述 随着浏览器功能不断增强,越来越多网站开始考虑,将大量数据储存在客户端,这样可以减少从服务器获取数据,直接从本地获取数据。...现有的浏览器数据储存方案,都不适合储存大量数据:Cookie 大小不超过4KB,且每次请求都会发送回服务器;LocalStorage 在 2.5MB 到 10MB 之间(各家浏览器不同),而且不提供搜索功能...(1)数据数据库是一系列相关数据容器。每个域名(严格说,是协议 + 域名 + 端口)都可以新建任意多个数据库。 IndexedDB 数据库有版本概念。同一个时刻,只能有一个版本数据库存在。...如果指定数据库不存在,就会新建数据库。第二个参数是整数,表示数据版本。如果省略,打开已有数据库时,默认为当前版本;新建数据库时,默认为1。...'); } }; } read(); 上面代码objectStore.get()方法用于读取数据,参数是主键值。

59940

JavaScript IndexedDB 完整指南

IndexedDB 用于在浏览器存储数据,对于需要离线工作 web 应用程序(大多数进步 web 应用程序)尤其重要。 首先,让我们介绍一下为什么需要将数据存储在 web 浏览器。...浏览器存储方式 关于如何在浏览器存储数据,Web 标准提供了三个主要 API: Cookies:此数据存储在浏览器,Cookies 大小限制为 4k。...LocalStorage/SessionStorage:LocalStorage / SessionStorage是浏览器内置键值存储,其中每个大小限制为 5MB。...在这些方式,localStorage 是进行简单操作和存储少量数据好选择。对于更复杂或常规操作,IndexedDB 可能是更好选择,特别是在需要异步获取数据情况下。...request.onupgradeneeded 事件,当试图打开一个版本号高于数据当前版本号数据库时,该事件就会运行。

1.6K10

indexedDB 基本使用

三、创建对象存储空间和索引 在关系型数据库(mysql),一个数据库中会有多张表,每张表有各自主键、索引等; 在key-value型数据库(indexedDB), 一个数据库会有多个对象存储空间...向数据增加数据 前面提到,增加数据需要通过事务,事务使用方式如下: vartransaction=db.transaction(['movies'],'readwrite'); transaction.oncomplete...现在,我们通过事务向数据indexedDB-test 对象存储空间movies插入数据: varobjectStore=transaction.objectStore('movies');// 指定对象存储空间...; }; 从数据获取数据 获取数据使用get方法,同上类似: varrequest= db.transaction('movies') .objectStore('movies') .get('9999682...在indexedDB2规范,在对象存储空间对象上纳入了一个getAll()方法,可以获取所有对象: objectStore.getAll().onsuccess=function(event){ };

1.6K100

indexedDB_INDEX函数

【因为indexedDB 是异步,所以它所有的操作都必须建立一个请求(request),请求结果将被封装在request实例返回】 如果不存在指定数据库,则创建数据库,然后连接数据库,返回...库版本 一个数据库同一时间只能存在一个最新版本(该版本记录了当前使用数据库和表结构) 只有在修改数据库结构和表结构时,版本才需要升级 修改数据库结构和表结构或升级数据库版本对数据库内数据一般没有影响...在值对象获取一个节点值属性链式方法字符串表达 自动生成。...获取。...如果为true,索引将不允许单个键值重复。 multiEntry 。如果为 true,则当 Path 解析为数组时,索引将为每个数组元素在索引添加一个条目。

99750
领券