数据库的打开/新增/删除

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 使用的更多相关文章

  1. IndexedDB(本地存储)

    var students = [{ id: 1001, name: "Byron", age: 24 }, { id: 1002, name: "Frank", ...

  2. HTML5存储之 indexedDB

    IndexeDB是HTML5 重要的一部分,它是一种轻量级的NOSQL数据库.对创建具有丰富本地存储数据的数据密集型的离线HTML5 Web 应用程序很有用. IndexedDB是为了能够在客户端存储 ...

  3. Notes:indexedDB使用

    indexedDB是浏览器端保存结构化数据的一种数据库,类似于mysql,oracle等数据库,但indexedDB使用对象存储数据,而不是用表. indexedDB是全局的宿主对象,使用window ...

  4. HTML5本地存储——IndexedDB(一:基本使用)

    在HTML5本地存储——Web SQL Database提到过Web SQL Database实际上已经被废弃,而HTML5的支持的本地存储实际上变成了 Web Storage(Local Stora ...

  5. IndexedDB参考资料网址

    IndexedDB:浏览器里内置的数据库, Web骇客 http://www.webhek.com/indexeddb/ 前端的数据库:IndexedDB入门(很全面) http://web.jobb ...

  6. HTML5本地存储——IndexedDB(二:索引)

    在HTML5本地存储——IndexedDB(一:基本使用)中介绍了关于IndexedDB的基本使用方法,很不过瘾,这篇我们来看看indexedDB的杀器——索引. 熟悉数据库的同学都知道索引的一个好处 ...

  7. js IndexedDB:浏览器端数据库的demo实例

    IndexedDB具有以下特点. (1)键值对储存. IndexedDB内部采用对象仓库(object store)存放数据.所有类型的数据都可以直接存入,包括JavaScript对象.在对象仓库中, ...

  8. Web数据持久化存储IndexedDB(不常用)

    IndexedDB是在浏览器中保存结构化数据的一种数据库,为了替换WebSQL(标准已废弃,但被广泛支持)而出现.IndexedDB使用NoSQL的形式来操作数据库,保存和读取是JavaScript对 ...

  9. [转]使用 HTML5 IndexedDB API

    本地数据持久性提高了 Web 应用程序可访问性和移动应用程序响应能力 索引数据库 (IndexedDB) API(作为 HTML5 的一部分)对创建具有丰富本地存储数据的数据密集型的离线 HTML5 ...

  10. HTML5 indexedDB数据库的入门学习(二)

    上一篇关于indexedDB的学习笔记主要写了indexedDB数据库的基本操作—增删改查:但是为什么我们要用indexedDB呢?为什么indexedDB受到了开发者们的青睐呢?最主要的就是inde ...

随机推荐

  1. 打包一份py给大家用!!!

    好不容易写完了代码,却发现对面无法使用自己的python代码,其无奈可想而知 在这里就给大家介绍一下pyinstaller的简单用法 你所需要的就是在电脑上安装好 https://blog.csdn. ...

  2. 并行网关 Parallel Gateway

    并行网关 Parallel Gateway 作者:Jesai 2018年3月25日 00:26:21 前言: 做工作流时间长后,慢慢的就会发现,很多客户会需要会签的功能,会签的情况也有很多种,实现的方 ...

  3. C++中的四个智能指针

    只能指针的行为类似常规指针,重要的区别是它负责自动释放所指向的对象.智能指针定义在memory头文件中. 1. auto_ptr(C++11已经舍弃) 由new expression获得的对象,在au ...

  4. [bzoj4567] [loj#2012] [SCOI2016] 背单词

    Description \(Lweb\) 面对如山的英语单词,陷入了深深的沉思,「我怎么样才能快点学完,然后去玩三国杀呢?」.这时候睿智的凤老师从远处飘来,他送给了 \(Lweb\) 一本计划册和一大 ...

  5. NOI2.5 8465:马走日

    描述 马在中国象棋以日字形规则移动. 请编写一段程序,给定n*m大小的棋盘,以及马的初始位置(x,y),要求不能重复经过棋盘上的同一个点,计算马可以有多少途径遍历棋盘上的所有点. 输入 第一行为整数T ...

  6. PHP 1-16课

    浏览器      使用火狐浏览器 认识标签 个人使用的编辑器:HbuilderX 标签是HTML5的基本结构,标签分为双标签和单标签 例如:<li> </li> <br ...

  7. Python中将变量按行写入txt文本中

    案例一: 讲数组a 循环写入名称为2.txt的文档中 # -*-coding:utf8-*- import requests from lxml import etree a=[1,2,3,4,5,6 ...

  8. 简单的在jsp页面操作mysql

    ---恢复内容开始--- 上一篇讲了在DOS界面下操作mysql 现在我们来说说怎么在jsp页面中操作mysql 要用jsp页面操作mysql需要jdbc(不是非要jdbc,还有其他的) 下载地址:w ...

  9. 在python开发工具PyCharm中搭建QtPy环境(详细)

    在python开发工具PyCharm中搭建QtPy环境(详细) 在Python的开发工具PyCharm中安装QtPy5(版本5):打开“File”——“Settings”——“Project Inte ...

  10. JSTL (标准标签库)

    JSTL(标准标签库) 作用: Web程序员能够利用JSTL和EL来开发Web程序,取代传统直接在页面上嵌入Java程序(Scripting)的做法,以提高程序的阅读性.维护性和方便性. 使用方法:J ...