首页 > 数据库技术 > 详细

web API简介(四):客户端储存之IndexedDB API

时间:2018-02-14 22:52:59      阅读:344      评论:0      收藏:0      [点我收藏+]

概述

前篇:web API简介(三):客户端储存之Web Storage API

客户端储存从某一方面来说和动态网站差不多。动态网站是用服务端来储存数据,而客户端储存是用客户端来储存数据。

IndexedDB API就是现代HTML5客户端储存的方法之二。

IndexedDB介绍

IndexedDB是专门为大量结构化数据设计的。

IndexedDB有这些特性

(1)IndexedDB数据库储存的是键值对。

(2)IndexedDB是基于事务型数据库模型的。

(3)IndexedDB API是异步型的。

(4)IndexedDB使用很多请求(requests)和响应。

(5)IndexedDB使用DOM通知你,当结果被返回的时候。

(6)IndexedDB数据库是对象型的数据库。

(7)IndexedDB不使用SQL。

(8)IndexedDB遵循同源政策。


IndexedDB有这些限制

(1)不支持排序。

(2)不支持同步操作。你必须自己写同步操作代码。

(3)不支持全文搜索,不支持类似SQL中的LIKE功能。

储存限制

indexedDB的Storage属性有2种:永久型和临时型。

永久型数据没有任何限制,永久储存,只有当用户删除它的时候才会被删除。

临时型数据有一个全局限制和同源限制。全局限制是指临时性数据的总量是50%的磁盘总量。当超出的时候,浏览器会自动删除最久远被用到的数据,直到可以储存目前需要储存的数据。同源限制是指同源下的临时型数据总量有一个限制,这个限制是全局限制的20%,但不低于10M,且不超过2G。当超出同源限制的时候,浏览器会抛出一个错误。

IndexedDB的使用模式

和MongoDB的使用差不多,具体如下:

(1)打开一个数据库。

(2)在数据库中建立一个object store。

(3)开始一项事务,并且用请求来操作数据库。

(4)通过监听DOM事件等待事务完成。

(5)利用返回的数据(request object)做一些操作。

使用IndexedDB

检验是否支持IndexedDB

if (!window.indexedDB) {
    window.alert("Your browser doesn't support a stable version of IndexedDB. Such and such feature will not be available.");
}

打开IndexedDB数据库

var request = window.indexedDB.open("MyTestDatabase", 3);

其中3是版本号。版本号不能用小数,否则会被四舍五入成整数。

更新IndexedDB数据库版本

在request发出后,onerror和onsuccess响应前,如果打开的IndexedDB数据库版本比已经存在的数据库版本低,那么就会出现onerror,如果如果打开的IndexedDB数据库版本比已经存在的数据库版本高,就会响应onupgradeneeded事件。

var request = indexedDB.open(dbName, 2);

//存在的数据库版本比2低的时候响应如下事件。
request.onupgradeneeded = function(event) {

  //数据库在event.target的resule属性里面
  var db = event.target.result;

  //建立object store,并设立键值
  var objectStore = db.createObjectStore("customers", { keyPath: "ssn" });

  //设定object store的索引name,并设定为可以重复
  objectStore.createIndex("name", "name", { unique: false });

  //设定object store的索引email,并设定为不可以重复
  objectStore.createIndex("email", "email", { unique: true });
  };

也可以利用autoIncrement设定一个自增长的键值。

//建立object store,并设立自增长的键值,储存在key字段中
var objectStore = db.createObjectStore("customers", { autoIncrement: true });

等待并返回IndexedDB数据库

var db;
request.onerror = function(event) {
  alert("Why didn't you allow my web app to use IndexedDB?!");
};
request.onsuccess = function(event) {
  db = event.target.result;
};

占坑

占坑

web API简介(四):客户端储存之IndexedDB API

原文:https://www.cnblogs.com/yangzhou33/p/8449010.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!