浏览器indexedDB操作
最近在浏览器中发现Storage下的IndexedDB数据库很感兴趣
制作了一些封装的方法,进行学习和测试并有了下面的一段代码
IndexedDB是在浏览器中存在的对象存储
类似NoSQL数据库,存储document对象文档
相比常见的关系型数据库更容易和js交互
简化了数据转化操作,在前端给开发人员开辟了一块可以存放大量复杂数据的空间
相比localStorage的key/value的字符串存储方式省去了JSON.XXX的转码过程,但数据库运行查找时间成本较大,适合存储复杂的数据结构,对于简单的数值存储还是建议使用cookie和local、session等作为存储媒介
indexedDB在相同主域名下可以访问,可以建立多个数据库,数据库内部可以建立objectStorage(对象存储or表)
indexedDB的原声接口可以实现:
1. 数据的按照指定索引查找
2. 数据全部查找
3. 按照大于、小于、等于或范围查找
通过封装可以实现模糊查询、属性值查询方式
希望对有需要的朋友可以有所帮助
不定期更新…
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>IndexedDB操作</title>
</head>
<body>
<label><input type="text"></label>
<button id="create">新建表student</button>
<button id="add">批量新增student</button>
<button id="delete">关键词搜索删除</button>
<button id="search">测试查询</button>
<button id="fuzzySearch">模糊查询</button>
<table id="table"></table>
<script>
function getRandom(max, min) {
max = max || 100;
min = min || 0;
return Math.floor(min + Math.random() * max);
}
var dbName = "MyDatabase",
tableName = 'students',
addData = [
{uid: getRandom(9999), name: "qwer", email: "@qq.com"},
{uid: getRandom(9999), name: "asdf", email: "@163.com"},
{uid: getRandom(9999), name: "zxcv", email: "@sina.com"},
{uid: getRandom(9999), name: "tyuo", email: "@live.com"},
{uid: getRandom(9999), name: "ghjk", email: "@baidu.com"}
],
Btn_create = document.getElementById('create'),
Btn_add = document.getElementById('add'),
Btn_delete = document.getElementById('delete'),
Btn_search = document.getElementById('search'),
Btn_fuzzy = document.getElementById('fuzzySearch'),
input = document.getElementsByTagName('input')[0];
//初始化数据库
var indexedDB = window.indexedDB || window.msIndexedDB || window.mozIndexedDB || window.webkitIndexedDB;