indexedDB入门
localforage
- localStorage局限性：存储容量限制，仅支持字符串，如果是存对象还需要将使用JSON.stringify和JSON.parse方法互相转换；读取都是同步的。大多数情况ok。但如果存储数据比较大，例如一张重要图片base64格式存储了，再读可能会有可感知的延迟时间。
- localforage 是一个js库，通过简单类似locaStorage的异步存储来改进你的 Web 应用程序的离线体验。它能存储多种类型的数据，而不仅仅是字符串。localforage 有一个优雅降级策略，若浏览器不支持 IndexedDB 或 WebSQL，则使用 localStorage;
- API:
indexedDB
- IndexedDB数据库使用key-value键值对储存数据；任何操作都发生在事务（transaction）中，indexedDB API提供了索引(indexes), 表(tables), 指针(cursors)等, 但是所有这些必须是依赖于某种事务的；不使用sql，而是通过索引(index)所产生的指针(cursor)来完成查询操作，从而使你可以遍历到结果；和大多数web存储解决方案相同，indexedDB也遵从同源协议；indexedDB在结果准备好之后通过DOM事件通知用户（success，error）；indexedDB是websql的替代品，是非关系型数据库（nosql）的一种；
- indexedDB数据库必须包含名字和版本
- 使用indexedDB的基本模式：
- 打开数据库并且开始一个事务。
- 创建一个 object store。
- 构建一个请求来执行一些数据库操作，像增加或提取数据等。
- 通过监听正确类型的 DOM 事件以等待操作完成。
- 在操作结果上进行一些操作（可以在 request 对象中找到）。
- 打开indexedDB数据库
var dbOpenRequest = window.indexedDB.open(dbName, version);
- 创建数据库的主键和字段
// onupgradeneeded用于数据库首次创建版本，或者window.indexedDB.open传递的新版本（版本要比现在的高）
dbOpenRequest.onupgradeneeded = function(event) {
var db = event.target.result;
db.onerror = function(event) {
console.log('数据库打开失败');
};
// 创建一个数据库存储对象
var objectStore = db.createObjectStore(dbname, {
keyPath: 'id',
autoIncrement: true
});
// 定义存储对象的数据项
objectStore.createIndex(indexName, keyPath, {unique: true});
} - 事务（可以理解为对数据库的操作，而且专指一个序列上的操作）
原子性(Atomicity)：事务中的所有操作作为一个整体提交或回滚。
一致性(Consistemcy)：事物完成时，数据必须是一致的，以保证数据的无损。
隔离性(Isolation)：对数据进行修改的多个事务是彼此隔离的。
持久性(Durability)：事务完成之后，它对于系统的影响是永久的，该修改即使出现系统故障也将一直保留。var transaction = db.transaction([dbName], 'readwrite');
// 打开已存储的数据对象
var objectStore = transaction.objectStore(dbName); // 增、删、清空、改
var objectStoreRequest = objectStore.add();
var objectStoreRequest = objectStore.delete();
var objectStoreRequest = objectStore.clear();
var objectStoreRequest = objectStore.put(); // 获取存储的对应键的存储对象
var objectStoreRequest = objectStore.get(id); objectStoreRequest.onsuccess = function(){
// 成功处理
} - 游标
objectStore.openCursor().onsuccess = function(event) {
var cursor = event.target.result;
if (cursor) {
console.log(cusor)
// 继续下一个游标项
cursor.continue();
}
else {
alert("No more entries!");
}
}; - 索引
var index = objectStore.index("name");
index.get(name).onsuccess = function(event) {
console.log(event.target.result)
}; index.openCursor().onsuccess = function(event) {
var cursor = event.target.result;
if (cursor) {
// cursor.key 是一个 name, 然后 cursor.value 是整个对象。
cursor.continue();
}
}; index.openKeyCursor().onsuccess = function(event) {
var cursor = event.target.result;
if (cursor) {
// cursor.key 是一个 name, 然后 cursor.value 是那个主键。
// 没有办法可以得到存储对象的其余部分。
cursor.continue();
}
}; // openCursor(val)可以传参数（具体的key或者范围） - 如果是浏览器主窗体线程开发，同时存储数据结构简单，例如，就存个
true/false，显然localStorage上上选；如果数据结构比较复杂，同时对浏览器兼容性没什么要求，可以考虑使用indexedDB；如果是在Service Workers中开发应用，只能使用indexedDB数据存储。 - 局限性：
全球多种语言混合存储。国际化支持不好。需要自己处理和服务器端数据库同步。你得自己写同步代码
全文搜索
ps（在以下情况下，数据库可能被清除）:
用户请求清除数据
浏览器处于隐私模式。最后退出浏览器的时候，数据会被清除
硬盘等存储设备的容量到限
不正确的
不完整的改变 - 写一个demo（参考HTML5 indexedDB前端本地存储数据库实例教程），增加了查询，清空等功能；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<form id="form">
<p>项目名称：<input required name="name" autocomplete="off" required></p>
<p>开始时间：<input type="date" value="2017-07-16" name="begin" required></p>
<p>预计结束：<input type="date" value="2057-07-16" name="end" required></p>
<p>参与人员：<input name="person" placeholder="多人空格分隔" required autocomplete="off"></p>
<p>补充说明：<textarea rows="5" placeholder="非必填" name="remark"></textarea></p>
<p><input type="submit" value="确定创建"></p>
</form>
<p>查询：<input type='text' required id='searchVal'><button id='search'>Search</button></p>
<button id='clear'>clear</button> <div id="result" class="result">
<table>
<thead>
<tr>
<th>项目名称</th>
<th>开始时间</th>
<th>结束时间</th>
<th>参与人员</th>
<th>补充说明</th>
<th>操作</th>
</tr>
</thead>
<tbody></tbody>
</table>
<div id="status" class="status">加载中...</div>
</div> <!-- 列表数据模板 -->
<script id="tplList" type="text/template">
<tr>
<td data-key="name" data-id="$id$" contenteditable="plaintext-only">$name$</td>
<td data-key="begin" data-id="$id$" contenteditable="plaintext-only">$begin$</td>
<td data-key="end" data-id="$id$" contenteditable="plaintext-only">$end$</td>
<td data-key="person" data-id="$id$" contenteditable="plaintext-only">$person$</td>
<td data-key="remark" data-id="$id$" contenteditable="plaintext-only">$remark$</td>
<td><a href="javascript:" role="button" class="jsListDel" data-id="$id$">删除</a></td>
</tr>
</script>
<script>
(function () {
// 元素们
var eleForm = document.querySelector('#form');
var eleTbody = document.querySelector('#result tbody');
var eleStatus = document.getElementById('status');
var search = document.getElementById('search');
var searchVal = document.getElementById('searchVal');
var clear = document.getElementById('clear');
// 模板字符内容
var strTplList = document.getElementById('tplList').innerHTML; var logError = function (error) {
eleStatus.style.display = 'block';
eleStatus.innerHTML = '<span class="error">'+ error +'</span>';
}, logInfo = function (info) {
eleStatus.style.display = 'block';
eleStatus.innerHTML = '<span class="info">'+ info + '</span>';
}; // 简易模板方法
String.prototype.temp = function(obj) {
return this.replace(/\$\w+\$/gi, function(matchs) {
return obj[matchs.replace(/\$/g, "")] || '';
});
}; // 本演示使用的数据库名称
var dbName = 'project';
// 版本
var version = 1;
// 数据库数据结果
var db; // 打开数据库
var DBOpenRequest = window.indexedDB.open(dbName, version); // 如果数据库打开失败
DBOpenRequest.onerror = function(event) {
logError('数据库打开失败');
}; DBOpenRequest.onsuccess = function(event) {
// 存储数据结果
db = DBOpenRequest.result; // 显示数据
method.show();
}; // 下面事情执行于：数据库首次创建版本，或者window.indexedDB.open传递的新版本（版本数值要比现在的高）
DBOpenRequest.onupgradeneeded = function(event) {
var db = event.target.result; db.onerror = function(event) {
logError('数据库打开失败');
}; // 创建一个数据库存储对象
var objectStore = db.createObjectStore(dbName, {
keyPath: 'id',
autoIncrement: true
}); // 定义存储对象的数据项
objectStore.createIndex('id', 'id', {
unique: true
});
objectStore.createIndex('name', 'name');
objectStore.createIndex('begin', 'begin');
objectStore.createIndex('end', 'end');
objectStore.createIndex('person', 'person');
objectStore.createIndex('remark', 'remark');
}; search.addEventListener('click', function(){
method.search(searchVal.value);
})
clear.addEventListener('click', function(){
method.clear();
}) var method = {
add: function (newItem) {
var transaction = db.transaction([dbName], "readwrite");
// 打开已经存储的数据对象
var objectStore = transaction.objectStore(dbName);
// 添加到数据对象中
var objectStoreRequest = objectStore.add(newItem);
objectStoreRequest.onsuccess = function(event) {
method.show();
};
},
edit: function (id, data) {
// 编辑数据
var transaction = db.transaction([dbName], "readwrite");
// 打开已经存储的数据对象
var objectStore = transaction.objectStore(dbName);
// 获取存储的对应键的存储对象
var objectStoreRequest = objectStore.get(id);
// 获取成功后替换当前数据
objectStoreRequest.onsuccess = function(event) {
// 当前数据
var myRecord = objectStoreRequest.result;
// 遍历替换
for (var key in data) {
if (typeof myRecord[key] != 'undefined') {
myRecord[key] = data[key];
}
}
// 更新数据库存储数据
objectStore.put(myRecord);
};
},
del: function (id) {
// 打开已经存储的数据对象
var objectStore = db.transaction([dbName], "readwrite").objectStore(dbName);
// 直接删除
var objectStoreRequest = objectStore.delete(id);
console.log(objectStoreRequest);
// 删除成功后
objectStoreRequest.onsuccess = function() {
method.show();
};
},
clear: function(){
var objectStore = db.transaction([dbName], 'readwrite').objectStore(dbName);
objectStore.clear();
method.show();lo
},
search: function(val){
var objectStore = db.transaction([dbName], 'readwrite').objectStore(dbName);
var index = objectStore.index('name');
var htmlProjectList = '';
index.openCursor(val).onsuccess = function(){
var cursor = event.target.result;
if (cursor) {
htmlProjectList = htmlProjectList + strTplList.temp(cursor.value);
// 继续下一个游标项
cursor.continue();
// 如果全部遍历完毕
}else {
logInfo('');
eleTbody.innerHTML = htmlProjectList;
if (htmlProjectList == '') {
logInfo('暂无数据');
}
}
};
},
show: function () {
// 最终要展示的HTML数据
var htmlProjectList = '';
// 打开对象存储，获得游标列表
var objectStore = db.transaction(dbName).objectStore(dbName);
objectStore.openCursor().onsuccess = function(event) {
var cursor = event.target.result;
// 如果游标没有遍历完，继续下面的逻辑
if (cursor) {
htmlProjectList = htmlProjectList + strTplList.temp(cursor.value);
// 继续下一个游标项
cursor.continue();
// 如果全部遍历完毕
} else {
logInfo('');
eleTbody.innerHTML = htmlProjectList; if (htmlProjectList == '') {
logInfo('暂无数据');
}
}
}
}
}; // 表单提交新增数据
eleForm.addEventListener('submit', function (event) {
event.preventDefault(); var formData = {}; [].slice.call(this.querySelectorAll('input,textarea')).forEach(function (ele) {
if (ele.name) {
formData[ele.name] = ele.value;
}
}); // 添加新的数据
method.add(formData); this.reset();
}); // 编辑事件
eleTbody.addEventListener('focusout', function (event) {
var eleTd = event.target;
// 获取id，也就是获得主键
var id = eleTd && eleTd.getAttribute('data-id');
if (!id || !/td/.test(eleTd.tagName)) { return; } // 这是要替换的数据
var data = {
id: id * 1
};
// 获得现在的数据
[].slice.call(eleTd.parentElement.querySelectorAll('td[data-key]')).forEach(function (td) {
var key = td.getAttribute('data-key');
var value = td.innerText || td.textContent || ''; data[key] = value;
}); // 更新本地数据库
method.edit(id, data);
});
// 删除事件
eleTbody.addEventListener('click', function (event) {
var eleBtn = event.target, id = '';
if (eleBtn && eleBtn.classList.contains('jsListDel') && (id = eleBtn.getAttribute('data-id'))) {
method.del(id * 1);
event.preventDefault();
}
});
})();
</script>
</body>
</html>
indexedDB入门的更多相关文章
- 浏览器数据库 IndexedDB 入门
一.概述 随着浏览器的功能不断增强,越来越多的网站开始考虑,将大量数据储存在客户端,这样可以减少从服务器获取数据,直接从本地获取数据. 现有的浏览器数据储存方案,都不适合储存大量数据:Cookie 的 ...
- 浏览器数据库 IndexedDB 入门教程
一.概述 随着浏览器的功能不断增强,越来越多的网站开始考虑,将大量数据储存在客户端,这样可以减少从服务器获取数据,直接从本地获取数据. 现有的浏览器数据储存方案,都不适合储存大量数据:Cookie 的 ...
- IndexedDB参考资料网址
IndexedDB:浏览器里内置的数据库, Web骇客 http://www.webhek.com/indexeddb/ 前端的数据库:IndexedDB入门(很全面) http://web.jobb ...
- 深入了解浏览器存储：对比Cookie、LocalStorage、sessionStorage与IndexedDB
摘要: 对比Cookie.LocalStorage.sessionStorage与IndexedDB 作者:浪里行舟 Fundebug经授权转载,版权归原作者所有. 前言 随着移动网络的发展与演化,我 ...
- 一文梳理Web存储，从cookie，WebStorage到IndexedDB
前言 HTTP是无状态的协议,网络早期最大的问题之一是如何管理状态.服务器无法知道两个请求是否来自同一个浏览器.cookie应运而生,开始出现在各大网站,然而随着前端应用复杂度的提高,Cookie 也 ...
- Koa 框架教程
Koa 框架教程 作者: 阮一峰 日期: 2017年8月 9日 Node 主要用在开发 Web 应用.这决定了使用 Node,往往离不开 Web 应用框架. Koa 就是一种简单好用的 Web 框 ...
- 有趣的HTML5 Web 存储
HTML5 web 存储,一个比cookie更好的本地存储方式. 什么是 HTML5 Web 存储? 使用HTML5可以在本地存储用户的浏览数据. 早些时候,本地存储使用的是 cookie.但是Web ...
- HTML5 indexedDB数据库的入门学习（二）
上一篇关于indexedDB的学习笔记主要写了indexedDB数据库的基本操作—增删改查:但是为什么我们要用indexedDB呢?为什么indexedDB受到了开发者们的青睐呢?最主要的就是inde ...
- HTML5 indexedDB数据库的入门学习（一）
笔者早些时间看过web sql database,但是不再维护和支持,所以最近初步学习了一下indexedDB数据库,首先indexedDB(简称IDB)和web sql database有很大的差别 ...
随机推荐
- linux常用命令：whereis 命令
whereis命令只能用于程序名的搜索,而且只搜索二进制文件(参数-b).man说明文件(参数-m)和源代码文件(参数-s).如果省略参数,则返回所有信息. 和find相比,whereis查找的速度非 ...
- Hive 大数据倾斜总结
在做Shuffle阶段的优化过程中,遇 到了数据倾斜的问题,造成了对一些情况下优化效果不明显.主要是因为在Job完成后的所得到的Counters是整个Job的总和,优化是基于这些 Counters得出 ...
- DOS操作系统的历史
昨日(7月27日),微软公司的DOS操作系统迎来了30岁生日. DOS是历史上一个划时代的产品,标识着PC(个人电脑)的崛起和普及,对计算机行业影响深远. 只有了解DOS的历史,才能理解今天的计算机工 ...
- win7 xampp 验证码，session出不来的问题
win7 xampp 验证码,session出不来的问题 需要在前面加上全路径,如:"\xampp\tmp" 变成"D:\xampp\tmp" Warning: ...
- Python入门之面向对象的多态和继承
本章内容 Python面向对象的多态和继承对比 ========================================= 在OOP程序设计中,当我们定义一个class的时候,可以从某个现有的 ...
- P4336 [SHOI2016]黑暗前的幻想乡
P4336 [SHOI2016]黑暗前的幻想乡 矩阵树定理(高斯消元+乘法逆元)+容斥 ans=总方案数 -(公司1未参加方案数 ∪ 公司2未参加方案数 ∪ 公司3未参加方案数 ∪ ...... ∪ ...
- Docker与虚拟机技术
最近docker技术在网络上非常火爆,各种技术下载中心总能看到一个以docker镜像方式下载的下载选项,而当你下载下来运行发现,这就是一个虚拟机嘛.究竟是不是呢?一起来看看. 我们先来看看传统意义上的 ...
- c++的友元类、方法及其益处
在java中,我们知道除了public和private,protected外,还有默认的包可见性访问级别,虽然如此,很多时候出于早期设计缺陷的原因,我们需要访问一些包或者protected可见性级别的 ...
- troubleshooting-执行导数shell脚本抛异常error=2, No such file or directory
Cannot run program "order_log.sh" (in directory "/data/yarn/nm/usercache/chenweidong/ ...
- 向linux内核版本号添加字符/为何有时会自动添加"+"号或者"xxx-dirty"【转】
本文转载自:https://blog.csdn.net/kangear/article/details/17020835 原文地址:http://blog.csdn.net/adaptiver/art ...