indexedDB 使用
数据库的打开/新增/删除
initDB() {
let _this = this;
let obj = {
id: 1,
name: _this.addForm.content
}
let indexedDB = window.indexedDB || window.webkitindexedDB || window.msIndexedDB || mozIndexedDB;
request = indexedDB.open('edp'); //edp数据库名称
request.onsuccess = function(event) {
console.log('打开成功');
db = event.target.result;
//清空表
//let tx = db.transaction('messageCode', 'readwrite');
//let store = tx.objectStore('messageCode');
//store.clear();
// 删除表
let tx = db.transaction('messageCode', 'readwrite');
let store = tx.objectStore('messageCode');
store.delete(1);
//添加表
let objStore;
let transaction = db.transaction(['messageCode'], 'readwrite');
objStore = transaction.objectStore('messageCode');
objStore.add(obj);
}
request.onupgradeneeded = function(event) {
db = event.target.result;
let store;
//创建表
if(!db.objectStoreNames.contains('messageCode')) {
store = db.createObjectStore('messageCode', {
keyPath: 'id',
autoIncrement: true
});
}
console.log('创建对象仓库成功');
}
}
更改表
//内容更改
changeCode() {
let obj = {
id: 1,
name: this.addForm.content
}
//更新表
let tx = db.transaction('messageCode', 'readwrite');
let store = tx.objectStore('messageCode');
let req = store.get(1);
req.onsuccess = function(e) {
store.put(obj);
console.log('更新成功');
};
},
新页面获取表
created() {
let _this = this;
var request = window.indexedDB.open('edp');
var db;
request.onerror = function() {
console.log('数据库打开报错');
}
request.onsuccess = function(event) {
console.log('数据库打开成功');
db = event.target.result;
var transaction = db.transaction(['messageCode'], 'readwrite');
var objStore = transaction.objectStore('messageCode');
// 读取数据
var req = objStore.get(1);
req.onsuccess = function(e) {
if(req.result) {
console.log('已经查询到数据为:');
console.log(req.result);
_this.online = req.result.name;
} else {
console.log('未查询到数据');
}
}
}
request.onupgradeneeded = function(event) {
console.log('数据库升级事件');
db = event.target.result;
console.log(db);
}
}
indexedDB 使用的更多相关文章
- IndexedDB(本地存储)
var students = [{ id: 1001, name: "Byron", age: 24 }, { id: 1002, name: "Frank", ...
- HTML5存储之 indexedDB
IndexeDB是HTML5 重要的一部分,它是一种轻量级的NOSQL数据库.对创建具有丰富本地存储数据的数据密集型的离线HTML5 Web 应用程序很有用. IndexedDB是为了能够在客户端存储 ...
- Notes:indexedDB使用
indexedDB是浏览器端保存结构化数据的一种数据库,类似于mysql,oracle等数据库,但indexedDB使用对象存储数据,而不是用表. indexedDB是全局的宿主对象,使用window ...
- HTML5本地存储——IndexedDB(一:基本使用)
在HTML5本地存储——Web SQL Database提到过Web SQL Database实际上已经被废弃,而HTML5的支持的本地存储实际上变成了 Web Storage(Local Stora ...
- IndexedDB参考资料网址
IndexedDB:浏览器里内置的数据库, Web骇客 http://www.webhek.com/indexeddb/ 前端的数据库:IndexedDB入门(很全面) http://web.jobb ...
- HTML5本地存储——IndexedDB(二:索引)
在HTML5本地存储——IndexedDB(一:基本使用)中介绍了关于IndexedDB的基本使用方法,很不过瘾,这篇我们来看看indexedDB的杀器——索引. 熟悉数据库的同学都知道索引的一个好处 ...
- js IndexedDB:浏览器端数据库的demo实例
IndexedDB具有以下特点. (1)键值对储存. IndexedDB内部采用对象仓库(object store)存放数据.所有类型的数据都可以直接存入,包括JavaScript对象.在对象仓库中, ...
- Web数据持久化存储IndexedDB(不常用)
IndexedDB是在浏览器中保存结构化数据的一种数据库,为了替换WebSQL(标准已废弃,但被广泛支持)而出现.IndexedDB使用NoSQL的形式来操作数据库,保存和读取是JavaScript对 ...
- [转]使用 HTML5 IndexedDB API
本地数据持久性提高了 Web 应用程序可访问性和移动应用程序响应能力 索引数据库 (IndexedDB) API(作为 HTML5 的一部分)对创建具有丰富本地存储数据的数据密集型的离线 HTML5 ...
- HTML5 indexedDB数据库的入门学习(二)
上一篇关于indexedDB的学习笔记主要写了indexedDB数据库的基本操作—增删改查:但是为什么我们要用indexedDB呢?为什么indexedDB受到了开发者们的青睐呢?最主要的就是inde ...
随机推荐
- 【转】程序员"青春饭"问题之我见
1. 问题描述问题1: 什么是程序员?在本文中程序员的定义为: 拥有编程技能,在IT.互联网公司打工的IT从业人员.程序员与很多行业最大的不同是该行业的形成时间短:1954年第一台计算机才诞生,而中医 ...
- Redis(三):set/get 命令解析
经过前两篇的介绍,我们对整个redis的动作流程已经有比较清晰的认识. 接下来就是到具体的命令处理方式的理解了,想来我们用这些工具的意义也是在此.虽然没有人觉得,一个set/get方法会有难度,但是我 ...
- springboot中使用logback
原文地址:https://blog.csdn.net/tianyaleixiaowu/article/details/73321610 Springboot默认集成的就是logback,logback ...
- 【VBA】EXCEL通过VBA生成SQL,自动生成创建表结构SQL
原文:https://blog.csdn.net/zutsoft/article/details/45441343 编程往往与数据库密不可分,一个项目往往有很多的表,很多时候通过excel来维护表结构 ...
- 龙芯 Fedora 28 设置 VNC
系统为龙芯版Fedora28 (床28) Fedora防火墙默认阻止了VNC所需的端口的访问,导致VNC客户端一直无法连接. 安装VNC Server sudo dnf install tigervn ...
- JVM: JVM 内存划分
概述 如果在大学里学过或者在工作中使用过 C 或者 C++ 的读者一定会发现这两门语言的内存管理机制与 Java 的不同.在使用 C 或者 C++ 编程时,程序员需要手动的去管理和维护内存,就是说需要 ...
- Commvault逻辑架构及组件说明
在学习和使用Commvault软件的过程中,经常会碰到一些术语和缩写,初学者可能并不是很清楚这些术语和缩写的具体含义,接下来我们梳理一下Commvault软件中这些属于和缩写的含义,有可能一次不能梳理 ...
- BAT脚本每隔30秒创建一个512兆文件(测试磁盘监控用)
@echo offsetlocal ENABLEDELAYEDEXPANSIONset /a ii=0 for /l %%i in (1,1,100) do (set /a ii+=1ping -n ...
- 通过haar Cascades检测器来实现面部检测
在OpenCV中已经封装的很好只需要使用cv::CascadeClassifier类就可以很容易的实现面部的检测, 三大步: 1.训练好的特征分类器配置文件haarcascade_frontalfac ...
- RTMP、HTTP、HLS协议比较
RTMP HLS HTTP 直播协议一次看个够 直播从2016年一路火到了2017年,如今要在自己的App里加入直播功能,只要找一个现成的SDK就行了,什么拍摄.美颜.推流,一条龙服务.不过作为直播身 ...