jjzjj

#yyds干货盘点#前端存储之indexDB

尼羲 2023-03-28 原文
​localStorage​​​ 是前端本地存储的一种,其容量一般在 ​​5M-10M​​ 左右,用来缓存一些简单的数据基本够用,毕竟定位也不是大数据量的存储。

在某些场景下 ​​localStorage​​ 的容量就会有点捉襟见肘,其实浏览器是有提供大数据量的本地存储的如 ​​IndexedDB​​ 存储数据大小一般在 ​​250M​​ 以上。

弥补了​​localStorage​​​容量的缺陷,但是使用要比​​localStorage​​复杂一些。

IndexDB 是一个运行在浏览器上的非关系型数据库。既然是数据库了,那就不是 5M、10M 这样小打小闹级别了。理论上来说,IndexDB 理论上是没有存储上限的一般来说不会小于 250M)。它不仅可以存储字符串,还可以存储二进制数据。

​主要特点

  1. 键值对储存IndexedDB 内部采用对象仓库(object store)存放数据。所有类型的数据都可以直接存入,包括 JavaScript 对象。对象仓库中,数据以"键值对"的形式保存,每一个数据记录都有对应的主键,主键是独一无二的,不能有重复,否则会抛出一个错误。
  2. 异步 IndexedDB 操作时不会锁死浏览器,用户依然可以进行其他操作,这与 LocalStorage 形成对比,后者的操作是同步的。异步设计是为了防止大量数据的读写,拖慢网页的表现。
  3. 支持事务IndexedDB 支持事务(transaction),这意味着一系列操作步骤之中,只要有一步失败,整个事务就都取消,数据库回滚到事务发生之前的状态,不存在只改写一部分数据的情况。
  4. 同源限制IndexedDB 受到同源限制,每一个数据库对应创建它的域名。网页只能访问自身域名下的数据库,而不能访问跨域的数据库。
  5. 支持二进制储存IndexedDB 不仅可以储存字符串,还可以储存二进制数据(ArrayBuffer 对象和 Blob 对象。
  6. 储存空间大IndexedDB 的储存空间比 LocalStorage 大得多,一般来说不少于 250MB,甚至没有上限。储 存 在 电 脑 上 中 的 位 置 为 C:\Users\当 前 的 登 录 用 户\AppData\Local\Google\Chrome\User Data\Default\IndexedDB
基本概念

  1. 数据库(IDBDatabase 对象)数据库是一系列相关数据的容器。每个域名(严格的说,是协议 + 域名 + 端口)都可以新建任意多个数据库。但是它版本的概念。同一个时刻,只能有一个版本的数据库存在。如果要修改数据库结构(新增或删除表、索引或者主键),只能通过升级数据库版本完成。
  2. 对象仓库(IDBObjectStore 对象)每个数据库包含若干个对象仓库(object store)。它类似于关系型数据库的表格。
  3. 索引(IDBIndex 对象)为了加速数据的检索,可以在对象仓库里面,为不同的属性建立索引。
  4. 事务(IDBTransaction 对象)数据记录的读写和删改,都要通过事务完成。事务对象提供error、abort和complete三个事件监听操作结果。
  5. 操作请求(IDBRequest 对象)。
  6. 指针 (IDBCursor 对象)。
  7. 主键集合 (IDBKeyRange 对象)。
操作步骤

  1. 定义变量
var db = null;
var db_table = null;
var databaseName = 'indexDB';
var version = 1;
var data = [{
id:1,
name:'张一',
age: 1,
email:'zhangsan@example.com'
},{
id:2,
name:'张二',
age: 2,
email:'zhangsan@example.com'
},{
id:3,
name:'张三',
age: 3,
email:'zhangsan@example.com'
},{
id:4,
name:'张四',
age: 4,
email:'zhangsan@example.com'
},{
id:5,
name:'张五',
age: 5,
email:'zhangsan@example.com'
}]
  1. 打开数据仓库
/*
*@databaseName 数据仓库的名字
*@version 数据仓库的版本
*/

var request = window.indexedDB.open(databaseName, version);

/*
*数据仓库打开失败
*/
request.onerror = function (error){
console.log('IndexDB打开失败',error);
}

/*
*数据仓库打开成功
*/
request.onsuccess = function (res){
console.log('IndexDB打开成功',res);
db = res.target.result;
}

/*
*数据仓库升级事件(第一次新建库是也会触发,因为数据仓库从无到有算是升级了一次)
*/
request.onupgradeneeded = function (res){
console.log('IndexDB升级成功',res);
db = res.target.result;
db_table = db.createObjectStore('group', { keyPath: 'id' });
db_table.createIndex('indexName', 'name', { unique: false });
}
  1. 新建表和创建索引
request.onupgradeneeded = function (res){
console.log('IndexDB升级成功',res);
/*
*返回indexDB对象
*/
db = res.target.result;

/*
*创建数据仓库
*@params 数据仓库名
*@params 数据仓库配置项 keypath:主键,也可以 autoIncrement: true 自动生成
*/
db_table = db.createObjectStore('group', { keyPath: 'id' });

/*
*创建数据索引
*@params 索引名称
*@params 索引所在的属性
*@params 配置对象(说明该属性是否包含重复的值)
*/
db_table.createIndex('indexName', 'name', { unique: false });
}
  1. 新增数据 新增数据需要通过事务来完成, 写入数据需要新建一个事务, 新建时必须指定表格名称和操作模式("只读"或"读写")。
/*
*新建事务
*@params 数据仓库的数组
*@params 写入模式
*/
var store = db.transaction(['group'], 'readwrite').objectStore('group');

/*
*add方法添加数据
*@params 需要添加的数据信息
*/
var request = store.add({
id:new Date().getTime(),
name:'王二',
age:12,
email:'XXXX@xxx.com'
});

/*
*添加成功
*/
request.onsuccess = function (event) {
console.log('数据添加成功',event);
};

/*
*添加失败
*/
request.onerror = function (event) {
console.log('数据添加失败',event);
};
  1. 读取数据
读取数据也是通过事务完成。

/*
*新建事务
*@params 数据仓库的数组
*/
var store = db.transaction(['group']).objectStore('group');

/*
*get方法获取数据
*@params 数据的主键
*/
var request = store.get(1);

/*
*获取成功
*/
request.onsuccess = function (event) {
if(event.target.result){
console.log('数据获取成功',event);
}
else{
console.log('未获取到数据');
}
};

/*
*获取失败
*/
request.onerror = function (event) {
console.log('数据获取失败',event);
};
  1. 更新数据 更新数据要使用 IDBObject.put()方法
/*
*新建事务
*@params 数据仓库的数组
*@params 写入模式
*/
var store = db.transaction(['group']).objectStore('group');

/*
*put方法根据主键更新数据
*@params 数据的主键
*/
var request = store .put({
id:1,
name:'张一'+Math.random(),
age: 24,
email:'zhangsan@example.com'
});

/*
*更新成功
*/
request.onsuccess = function (event) {
console.log('数据更新成功',event);
};

/*
*更新失败
*/
request.onerror = function (event) {
console.log('数据更新失败',event);
};
  1. 删除数据
/*
*新建事务
*@params 数据仓库的数组
*/
var store = db.transaction(['group']).objectStore('group');

/*
*delete方法删除数据
*@params 数据的主键
*/
var request = store.delete(1);

/*
*删除成功
*/
request.onsuccess = function (event) {
console.log('数据删除成功',event);
};

/*
*删除失败
*/
request.onerror = function (event) {
console.log('数据删除失败',event);
};


有关#yyds干货盘点#前端存储之indexDB的更多相关文章

  1. ruby - 解析 RDFa、微数据等的最佳方式是什么,使用统一的模式/词汇(例如 schema.org)存储和显示信息 - 2

    我主要使用Ruby来执行此操作,但到目前为止我的攻击计划如下:使用gemsrdf、rdf-rdfa和rdf-microdata或mida来解析给定任何URI的数据。我认为最好映射到像schema.org这样的统一模式,例如使用这个yaml文件,它试图描述数据词汇表和opengraph到schema.org之间的转换:#SchemaXtoschema.orgconversion#data-vocabularyDV:name:namestreet-address:streetAddressregion:addressRegionlocality:addressLocalityphoto:i

  2. ruby - Rack:如何将 URL 存储为变量? - 2

    我正在编写一个简单的静态Rack应用程序。查看下面的config.ru代码:useRack::Static,:urls=>["/elements","/img","/pages","/users","/css","/js"],:root=>"archive"map'/'dorunProc.new{|env|[200,{'Content-Type'=>'text/html','Cache-Control'=>'public,max-age=6400'},File.open('archive/splash.html',File::RDONLY)]}endmap'/pages/search.

  3. ruby-on-rails - 为什么在 Rails 5.1.1 中删除了 session 存储初始化程序 - 2

    我去了这个website查看Rails5.0.0和Rails5.1.1之间的区别为什么5.1.1不再包含:config/initializers/session_store.rb?谢谢 最佳答案 这是删除它的提交:Setupdefaultsessionstoreinternally,nolongerthroughanapplicationinitializer总而言之,新应用没有该初始化器,session存储默认设置为cookie存储。即与在该初始值设定项的生成版本中指定的值相同。 关于

  4. ruby-on-rails - 尝试设置 Amazon 的 S3 存储桶 : 403 Forbidden error & setting permissions - 2

    我正在关注Hartl的railstutorial.org并已到达11.4.4:Imageuploadinproduction.我做了什么:注册亚马逊网络服务在AmazonIdentityandAccessManagement中,我创建了一个用户。用户创建成功。在AmazonS3中,我创建了一个新存储桶。设置新存储桶的权限:权限:本教程指示“授予上一步创建的用户读写权限”。但是,在存储桶的“权限”下,未提及新用户名。我只能在每个人、经过身份验证的用户、日志传送、我和亚马逊似乎根据我的名字+数字创建的用户名之间进行选择。我已经通过选择经过身份验证的用户并选中了上传/删除和查看权限的框(而不

  5. ruby - 如何打印出 Mechanized 存储的 cookie? - 2

    我正在使用mechanize登录网站,然后检索页面。我遇到了一些问题,我怀疑这是由于cookie中的某些值造成的。当Mechanize登录网站时,我假设它存储了cookie。如何通过Mechanize打印出存储在cookie中的所有数据? 最佳答案 代理有一个cookie方法。agent=Mechanize.newpage=agent.get("http://www.google.com/")agent.cookiesagent.cookies.to_scookie返回一个Mechanize::Cookiesobject

  6. ruby-on-rails - 闪存消息存储在哪里? - 2

    我以为它们存储在cookie中-但不,检查cookie没有任何结果。session也不存储它们。那么,我在哪里可以找到它们?我需要这个来直接设置它们(而不是通过flashhash)。 最佳答案 它们存储在inyoursessionstore.自rails2.0以来的默认设置是cookie存储,但请检查config/initializers/session_store.rb以检查您是否使用默认设置以外的东西。 关于ruby-on-rails-闪存消息存储在哪里?,我们在StackOverf

  7. ruby-on-rails - 在 Rails 中存储(结构化)配置数据的位置 - 2

    对于我正在编写的Rails3应用程序,我正在考虑从本地文件系统上的XML、YAML或JSON文件中读取一些配置数据。重点是:我应该把这些文件放在哪里?Rails应用程序中是否有用于存储此类内容的默认位置?附带说明一下,我的应用程序部署在Heroku上。 最佳答案 我经常做的是:如果文件是通用配置文件:我在目录/config中创建一个YAML文件,每个环境有一个上层key如果我为每个环境(大项目)创建一个文件:我为每个环境创建一个YAML并将它们存储在/config/environments/然后我在加载YAML的地方创建了一个初始化

  8. ruby - 如何存储和读取 RubyVM::InstructionSequence? - 2

    有没有办法将RubyVM::InstructionSequence存储到文件中并稍后读取?我尝试了Marshal.dump但没有成功。我收到以下错误:`dump':no_dump_dataisdefinedforclassRubyVM::InstructionSequence(TypeError) 最佳答案 是的,有办法。首先,您需要使InstructionSequence的load方法可访问,默认情况下该方法是禁用的:require'fiddle'classRubyVM::InstructionSequence#RetrieveR

  9. ruby-on-rails - 如何解析位于 Amazon S3 存储桶中的 CSV 文件 - 2

    下面是我用来从应用程序中解析CSV的代码,但我想解析位于AmazonS3存储桶中的文件。当推送到Heroku时它也需要工作。namespace:csvimportdodesc"ImportCSVDatatoInventory."task:wiwt=>:environmentdorequire'csv'csv_file_path=Rails.root.join('public','wiwt.csv.txt')CSV.foreach(csv_file_path)do|row|p=Wiwt.create!({:user_id=>row[0],:date_worn=>row[1],:inven

  10. ruby - 存储外部 API 的密码 - 最佳实践 - 2

    如果我构建了一个应用程序来访问来自Gmail、Twitter和Facebook的一些数据,并且我希望用户只需输入一次他们的身份验证信息,并且在几天或几周后重置,那会怎样是在Ruby中动态执行此操作的最佳方法吗?我看到很多人只是拥有他们客户/用户凭证的配置文件,如下所示:gmail_account:username:myClientpassword:myClientsPassword这看起来a)非常不安全,b)如果我想为成千上万的用户存储此类信息,它就无法工作。推荐的方法是什么?我希望能够在这些服务之上构建一个界面,因此每次用户进行交易时都必须输入凭据是不可行的。

随机推荐