网站建设详细需求文档,网页美工设计教学,opencart zencart网站建设,app开发公司年度发展规划随着浏览器的功能不断增强#xff0c;越来越多的网站开始考虑#xff0c;将大量数据储存在客户端#xff0c;这样可以减少从服务器获取数据#xff0c;直接从本地获取数据。
现有的浏览器数据储存方案#xff0c;都不适合储存大量数据#xff1a;Cookie 的大小不超过 4K… 随着浏览器的功能不断增强越来越多的网站开始考虑将大量数据储存在客户端这样可以减少从服务器获取数据直接从本地获取数据。
现有的浏览器数据储存方案都不适合储存大量数据Cookie 的大小不超过 4KB且每次请求都会发送回服务器LocalStorage 在 2.5MB 到 10MB 之间各家浏览器不同而且不提供搜索功能不能建立自定义的索引。所以需要一种新的解决方案这就是 IndexedDB 诞生的背景。
通俗地说IndexedDB 就是浏览器提供的本地数据库它可以被网页脚本创建和操作。IndexedDB 允许储存大量数据提供查找接口还能建立索引。这些都是 LocalStorage 所不具备的。就数据库类型而言IndexedDB 不属于关系型数据库不支持 SQL 查询语句更接近 NoSQL 数据库。
对比cookielocalStoragesessionStorageindexedDB存储大小4kb5M5M很多于 250MB甚至没有上限与服务器端通讯每次都会携带在HTTP头中若是使用cookie保存过多数据会带来性能问题仅在客户端即浏览器中保存不参与和服务器的通讯生命周期通常由服务器生成可设置失效时间。若是在浏览器端生成Cookie默认是关闭浏览器后失效除非被清除不然永久保存仅在当前会话下有效关闭页面或浏览器后被清除除非被清除不然永久保存使用场景判断用户是否登陆存储一些内容稳定的资源。好比图片内容丰富的电商网站会用它来存储 Base64 格式的图片字符串存储一些当前会话的信息好比微博的 sessionStorage就主要是存储你本次会话的浏览足迹和 localStorage 用途相似: 1. 存储量会更大
2. localStorage使用简单字符串键值对在本地存储数据而indexedDB能够存储任意类型的值(适合键值对较多的数据若是使用 localStorage 存储每次都要写入写出须要字符串化和对象化)
复制代码 目前Chrome 27、Firefox 21、Opera 15和IE 10支持这个API但是Safari完全不支持。
下面的代码用来检查浏览器是否支持这个API。
if(indexedDB in window) {// 支持
} else {// 不支持
} IndexedDB 具有以下特点。 1键值对储存。 IndexedDB 内部采用对象仓库object store存放数据。所有类型的数据都可以直接存入包括 JavaScript 对象。对象仓库中数据以“键值对”的形式保存每一个数据记录都有对应的主键主键是独一无二的不能有重复否则会抛出一个错误。 2异步。 IndexedDB 操作时不会锁死浏览器用户依然可以进行其他操作这与 LocalStorage 形成对比后者的操作是同步的。异步设计是为了防止大量数据的读写拖慢网页的表现。 3支持事务。 IndexedDB 支持事务transaction这意味着一系列操作步骤之中只要有一步失败整个事务就都取消数据库回滚到事务发生之前的状态不存在只改写一部分数据的情况。 4同源限制。 IndexedDB 受到同源限制每一个数据库对应创建它的域名。网页只能访问自身域名下的数据库而不能访问跨域的数据库。 5储存空间大。 IndexedDB 的储存空间比 LocalStorage 大得多一般来说不少于 250MB甚至没有上限。 6支持二进制储存。 IndexedDB 不仅可以储存字符串还可以储存二进制数据ArrayBuffer 对象和 Blob 对象。 IndexedDB 是一个比较复杂的 API涉及不少概念。它把不同的实体抽象成一个个对象接口。学习这个 API就是学习它的各种对象接口。 数据库IDBDatabase 对象对象仓库IDBObjectStore 对象索引 IDBIndex 对象事务 IDBTransaction 对象操作请求IDBRequest 对象指针 IDBCursor 对象主键集合IDBKeyRange 对象 下面是一些主要的概念。
1数据库
数据库是一系列相关数据的容器。每个域名严格的说是协议 域名 端口都可以新建任意多个数据库。
IndexedDB 数据库有版本的概念。同一个时刻只能有一个版本的数据库存在。如果要修改数据库结构新增或删除表、索引或者主键只能通过升级数据库版本完成。
2对象仓库
每个数据库包含若干个对象仓库object store。它类似于关系型数据库的表格。
3数据记录
对象仓库保存的是数据记录。每条记录类似于关系型数据库的行但是只有主键和数据体两部分。主键用来建立默认的索引必须是不同的否则会报错。主键可以是数据记录里面的一个属性也可以指定为一个递增的整数编号。
{ id: 1, value: 对应的值 }上面的对象中id属性可以当作主键。
数据体可以是任意数据类型不限于对象。
4索引
为了加速数据的检索可以在对象仓库里面为不同的属性建立索引。
5事务
数据记录的读写和删改都要通过事务完成。事务对象提供error、abort和complete三个事件用来监听操作结果。 用例代码
templatedivel-input v-model.trimdatabaseName :placeholder请输入数据库名称 /el-input v-model.trimtableName :placeholder请输入表名称 /el-input v-model.trimindex :placeholder请输入字段名 /el-button typeprimary clickbtn1()创建数据库/el-buttonhrel-input v-model.trimvalue :placeholder请输入值 /el-button typesuccess clickbtn2()添加数据/el-buttonhrel-input v-model.trimkeyPathValue :placeholder请输入主键值 /el-input v-model.trimnewValue :placeholder请输入修改值 /el-button typewarning clickbtn3()修改数据/el-buttonhrel-button typeinfo clickbtn4()读取数据/el-buttontemplate v-iftableData.lengthel-button typedanger clickbtn5删除全部/el-buttonel-table :datatableDatael-table-column :propkeyPath :labelkeyPath /el-table-column :propindex :labelindex /el-table-column label操作template slot-scopescopeel-button sizemini typedanger click.stopbtn6(scope.row[keyPath])删除/el-button/template/el-table-column/el-table/template/div
/template
script
export default {data() {return {databaseName: ,tableName: ,keyPath: id,keyPathValue: ,index: ,value: ,newValue: ,tableData: [],}},methods: {// 用例----------------------------------------// 创建btn1() {let databaseName this.databaseName;let version this.version;let tableName this.tableName;let keyPath this.keyPath;let indexs [[this.index, this.index, { unique: false }],];//如需定义多格字段就多几个数组// 创建表this.creatDatabaseTable({databaseName, version,tableName,//定义表名keyPath,//定义主键indexs,// 定义索引字段});},// 添加btn2() {let databaseName this.databaseName;let version this.version;let tableName this.tableName;let keyPath this.keyPath;let index this.index;this.addData({databaseName, version, tableName,data: {[keyPath]: ********.replace(/\*/g, () Math.round(Math.random() * 15).toString(16)),//随机id[index]: this.value,},onsuccess: d { console.log(onsuccess, d); },onerror: d { console.log(onerror, d); },})},// 修改btn3() {let databaseName this.databaseName;let version this.version;let tableName this.tableName;let keyPath this.keyPath;let index this.index;this.updateData({databaseName, version, tableName,data: {[keyPath]: this.keyPathValue,[index]: this.newValue,}});this.btn4();//刷新数据},// 读取btn4() {let databaseName this.databaseName;let version this.version;let tableName this.tableName;this.readData({databaseName, version, tableName,onsuccess: ({ data }) { this.tableData data },})},// 删除全部btn5() {let databaseName this.databaseName;let version this.version;let tableName this.tableName;this.delAllData({ databaseName, version, tableName, });this.btn4();//刷新数据},// 删除btn6(id) {let databaseName this.databaseName;let version this.version;let tableName this.tableName;this.delData({databaseName, version, tableName,data: id,//需要删除的数据主键onsuccess: d {this.btn4();//刷新数据},onerror: d { console.log(onerror, d); },})},// indexedDB----------------------------------------// 1、创建or打开客户端数据库createDatabase({ databaseName, version 1, onupgradeneeded, onsuccess, onerror } {}) {let request window.indexedDB.open(databaseName, version);request.onupgradeneeded onupgradeneeded;request.onsuccess onsuccess;request.onerror onerror;},getDatabase(obj) { return this.createDatabase(obj); },//获取数据库// 2、创建表creatDatabaseTable({ databaseName, version, tableName, keyPath, indexs, onupgradeneeded, onsuccess, onerror } {}) {this.getDatabase({databaseName, version,onupgradeneeded: d {let database d.target.result;if (!database.objectStoreNames.contains(tableName)) {//createObjectStore只能在onupgradeneeded里面执行let objectStore database.createObjectStore(tableName, { keyPath });(indexs || []).forEach(v objectStore.createIndex(...v));onupgradeneeded onupgradeneeded({ event: d, objectStore });}},onsuccess,onerror,})},// 3、添加数据or修改数据or删除数据addData({ databaseName, version, tableName, data, onsuccess, onerror, triggerName add } {}) {this.getDatabase({databaseName, version,onsuccess: d {let database d.target.result;let objectStore database.transaction(tableName, readwrite).objectStore(tableName);let request_objectStore objectStore.get(data[objectStore.keyPath]);request_objectStore.onsuccess event {event.target.result (triggerName put);//如果已经存在该主键数据就变成修改let request objectStore[triggerName](data);request.onsuccess onsuccess;request.onerror onerror;};},})},// 4、修改数据updateData(obj) { this.addData({ ...obj, triggerName: put }) },// 5、删除数据delData(obj) { this.addData({ ...obj, triggerName: delete }) },delAllData({ databaseName, version, tableName } {}) {this.getDatabase({databaseName, version,onsuccess: d {let objectStore d.target.result.transaction(tableName, readwrite).objectStore(tableName);objectStore.clear();},})},// 6、读取数据readData({ databaseName, version, tableName, onsuccess } {}) {this.getDatabase({databaseName, version,onsuccess: d {let database d.target.result;if (database.objectStoreNames.contains(tableName)) {let objectStore database.transaction(tableName).objectStore(tableName);let data [];objectStore.openCursor().onsuccess event {let cursor event.target.result;if (cursor) {data.push(cursor.value); cursor.continue();} else {onsuccess onsuccess({ event, data });// console.log(没有更多数据了); }};} else onsuccess onsuccess({ msg: 表格不存在, data: [] });},})},// ----------------------------------------}
};
/script
