当前位置: 首页 > news >正文

IndexedDB

IndexedDB是一个功能强大且高度灵活的存储系统,你可以使用它在用户浏览器中存储你希望存储的任何数据。不过,出色的功能和灵活性致使其API不像Web存储那么友好。你还会发现,移动端浏览器对IndexedDB的支持还不是很友好,即使支持。

IndexedDB关键术语

数据库

IndexedDB的最上层是数据库的概念。

对象存储

对象存储相当于保存数据的桶。如果你使用过传统的关系型数据库,则可以将对象存储想象成一张表。但是IndexedDB可以更灵活地存储数据。

索引

索引是一种从对象存储中检索数据的方式。

使用数据库

创建数据库时,需要提供一个名称和版本。数据库结构(指对象存储和索引,而不是实际数据本身)只能在更改版本时临时调整。
在IndexDB中,你所做的所有操作都是异步的。因此,打开数据库并不意味着立即就可以使用,而是需要在响应一个事件之后才可以使用。打开数据库操作可以触发的事件包括success、error、upgradeneeded和blocked.
其中upgradeneeded在用户首次访问数据库或者版本号发生变化时出发,这是设置数据结构的地方。bloced在数据库不可用或者无法使用时被触发。

function idbOK(){
    return "indexedDB" in window;
}
$(documengt).ready(function() {
    if(!idbOK) return;
    var openRequest = indexedDB.open("ora_idb1", 1);
    openRequest.onsuccess = function(e) {
        var db = e.target.result;
    }
});

上述代码中,首先检查浏览器是否支持IndexedDB。如果支持,则使用indexedDB.open方法打开数据库。第一个参数是数据库名称。由于一个IndexedDB数据库只提供给一个网站使用,因此不用担心该名称和其他数据库的名称相冲突。

使用对象存储

前面说过,indexedDB对象存储有点像SQL数据库表。它应该只包含一种“类型”的数据,比如"people""notes"或其他对象的实例。其思想是每个需要持久化的数据类型都有一个对象存储。
对象存储只能在upgradeneeded事件处理期间创建。假设你设计的数据库支持两种对象存储。数据之后,你又决定存户第三种类型的数据。你需要做两件事:第一,更改版本号;第二,编写代码,增加新的对象存储。

创建对象存储

要创建对象存储,首先应该检查它是否存在。可以利用数据库变量(从打开数据库操作的事件处理器获得)访问objectStoreNames属性。该属性是一个DOMStringList实例,你可以查看它是否已经包含了某个值。如果没有,则可以调用createObjectStore("name", options)方法创建对象存储。

openRequest.onupgradeneeded = function(e) {
    var thisDB = e.target.result;
    if(!thisDB.objectStoreNames.contains("firstOS")) {
        thisDB.createObjectStore("firstOS");
    }
}

定义主键

在对象存储中,每条数据都必须有一种能够唯一标识自己的方式。在定义对象存储时,你可以定义如何唯一地标识数据。
实际上,主要有两种定义方式。一种是定义一个key path,它本质上是一个永远存在并且包含唯一信息的属性。另一种是使用key generator,它本质上是一种生成唯一值的方式。

相关文章:

  • pl/sql 笔记之存储过程、函数、包、触发器(下)
  • mysql的库和表相关操作
  • Exchange 2010升级sp2报错
  • 【Cocosd2d-x CCMenu菜单之二】
  • ISO8583开发注意事项和心得体会
  • iOS 相册和网络图片的存取
  • beanshell获取响应结果数据
  • XYGame-网络同步3-防作弊
  • 红黑树 - C++代码实现
  • 自己定义iOS上双击Home键图切换
  • 数据预测的步骤
  • Elasticsearch学习笔记-04.2删除文档
  • 磁珠与电感的区别,看了就灰常明白了
  • Spring Quartz 集群动态创建任务
  • 考试题解集合
  • [ 一起学React系列 -- 8 ] React中的文件上传
  • [LeetCode] Wiggle Sort
  • 345-反转字符串中的元音字母
  • CoolViewPager:即刻刷新,自定义边缘效果颜色,双向自动循环,内置垂直切换效果,想要的都在这里...
  • gcc介绍及安装
  • JavaScript设计模式之工厂模式
  • Mithril.js 入门介绍
  • MySQL用户中的%到底包不包括localhost?
  • Web Storage相关
  • 纯 javascript 半自动式下滑一定高度,导航栏固定
  • 官方解决所有 npm 全局安装权限问题
  • 力扣(LeetCode)22
  • 为物联网而生:高性能时间序列数据库HiTSDB商业化首发!
  • 移动端解决方案学习记录
  • 选择阿里云数据库HBase版十大理由
  • ​草莓熊python turtle绘图代码(玫瑰花版)附源代码
  • (003)SlickEdit Unity的补全
  • (11)工业界推荐系统-小红书推荐场景及内部实践【粗排三塔模型】
  • (接口封装)
  • (七)c52学习之旅-中断
  • (学习日记)2024.03.12:UCOSIII第十四节:时基列表
  • (一)认识微服务
  • (原+转)Ubuntu16.04软件中心闪退及wifi消失
  • (转)全文检索技术学习(三)——Lucene支持中文分词
  • (转)自己动手搭建Nginx+memcache+xdebug+php运行环境绿色版 For windows版
  • (最完美)小米手机6X的Usb调试模式在哪里打开的流程
  • .net core 6 redis操作类
  • .NET Framework Client Profile - a Subset of the .NET Framework Redistribution
  • .NET Micro Framework初体验
  • .NET/C# 获取一个正在运行的进程的命令行参数
  • .NET/C# 解压 Zip 文件时出现异常:System.IO.InvalidDataException: 找不到中央目录结尾记录。
  • .NET设计模式(7):创建型模式专题总结(Creational Pattern)
  • .NET学习全景图
  • .pyc文件是什么?
  • .sh
  • ??javascript里的变量问题
  • @FeignClient注解,fallback和fallbackFactory
  • @NestedConfigurationProperty 注解用法
  • @RunWith注解作用
  • @vue/cli 3.x+引入jQuery