摘要:初体验特点对象形式存储异步防止锁死浏览器,是同步的支持事物只要有一步失败,整个事物回滚同源限制不能跨域访问数据库存储空间比大大的多支持二进制存储我写了一个通讯录的项目,利用在浏览器持续化端存储通讯录数据学习自阮一峰浏览器数据库我贴出大概示例
IndexedDB初体验 特点:
对象形式存储
异步 (防止锁死浏览器,localstorage是同步的
支持事物 (只要有一步失败,整个事物回滚
同源限制 (不能跨域访问数据库
存储空间比localstorage大 (大的多
支持二进制存储
我写了一个通讯录的项目,利用indexeddb在浏览器持续化端存储通讯录数据我贴出大概示例: 安装:
学习自: 阮一峰浏览器数据库 & indexedDB API
yarn install运行:
yarn start
// DB.ts interface Idb { database: string; // 数据库名称 version: number; // 版本号 db: any; // 数据库创建成功后的对象 store: any[]; // 初始化存储数据 tables: any[]; // 表选项 open(): void; // 打开数据库方法 add(): void; // 插入一条数据 read(i): void; // 读取指定数据 readAll(): void; // 读取全部数据 remove(i): void; // 移除指定数据 update(o): void; // 更新指定数据 }
init.ts
import IndexedDB from "./DB"; var db_person = new IndexedDB("db_test", 1); db_person.open(); // 初始化数据库操作
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/108577.html
背景 随着前端技术日新月异地快速发展,web应用功能和体验也逐渐发展到可以和原生应用媲美的程度,前端缓存技术的应用对这起到了不可磨灭的贡献,因此想一探前端的缓存技术,这篇文章主要会介绍在日常开发中比较少接触的IndexedDB IndexedDB 什么是IndexedDB IndexedDB简单理解就是前端数据库,提供了一种在用户浏览器中持久存储数据的方法,但是和前端关系型数据不同的是,Index...
摘要:在不指定的情况下,默认版本号为。具体示例如下在需要更新数据库的模式时,需要更新版本号。此时我们指定一个高于之前版本的版本号,就会触发事件。数据操作事务在中,我们也能够使用事务来进行数据库的操作。 概述 本文通过对IndexedDB的使用方法和使用场景进行相关介绍,对常见的问题进行解答。 同时,因为MDN中的相关文档缺乏相关逻辑性,所以不容易理解。本文将通过项目中常见的数据存储和操作需求...
摘要:概述是一个事务型数据库系统,类似于基于的。然而不同的是它使用固定列表,是一个基于的面向对象的数据库。参考文档浏览器数据库入门教程 概述 IndexedDB 是一个事务型数据库系统,类似于基于 SQL 的 RDBMS。 然而不同的是它使用固定列表,IndexedDB 是一个基于 JavaScript 的面向对象的数据库。现有的浏览器数据储存方案,都不适合储存大量数据:Cookie 的大小...
摘要:版本号必须为整数更新版本,打开版本为的数据库新数据库版本号为我们通过监听请求对象的事件来定义数据库版本更新时执行的方法。 前言 在 HTML5 的本地存储中,有一种叫 indexedDB 的数据库,该数据库是一种存储在客户端本地的 NoSQL 数据库,它可以存储大量的数据。从上篇:HTML5 进阶系列:web Storage ,我们知道 web Storage 可以方便灵活的在本地存取...
阅读 1175·2023-04-26 00:34
阅读 3347·2023-04-25 16:47
阅读 2109·2021-11-24 11:14
阅读 3091·2021-09-26 09:55
阅读 3681·2019-08-30 15:56
阅读 3209·2019-08-29 16:57
阅读 1901·2019-08-26 13:38
阅读 2662·2019-08-26 12:22