Use the library indexedDB-promised.

Create a database and stroe:

import idb from 'idb';

// Open(db_name, version, cb)
var dbPromise = idb.open('test-db', 1, function (upgradeDb) {
var keyValStore = upgradeDb.createObjectStore('keyval'); // create table
//put(value, key)
keyValStore.put('world', 'Hello');
});

Notice put() function take value frist then key.

Read the key in stroe:

// read "hello" in "keyval"
dbPromise.then(function (db) {
var tx = db.transaction('keyval'); // Open a transaction
var keyValStore = tx.objectStore('keyval'); // read the store
return keyValStore.get('hello'); // get value by key
}).then(function (val) {
console.log('The value of "hello" is:', val);
});

Write value to store:

// set "foo" to be "bar" in "keyval"
dbPromise.then(function (db) {
var tx = db.transaction('keyval', 'readwrite'); // ready for add key value
var keyValStore = tx.objectStore('keyval'); // get the store
keyValStore.put('bar', 'foo'); // set the value, notice it may not be success if any step in transaction fail.
return tx.complete; // tx.complete is a promise
}).then(function () {
console.log('Added foo:bar to keyval');
});

[PWA] 12. Intro to IndexedDB的更多相关文章

  1. [PWA] 1. Intro to Service worker

    Service worker stays between our browser and noetwork requests. It can help to fetch data from cache ...

  2. Angularjs学习---ubuntu12.04中karma安装配置中常见的问题总结

    karma启动时出现了很多问题: 1.安装karma前提条件 安装karma首先要安装nodejs,npm然后才可以安装karma.nodejs,npm的安装过程可以参考文章:Angularjs学习- ...

  3. Angularjs学习---ubuntu12.04中karma安装配置

    Angularjs学习---ubuntu12.04中karma安装配置中常见的问题总结   karma启动时出现了很多问题: 1.安装karma前提条件 安装karma首先要安装nodejs,npm然 ...

  4. golang结构体

    声明结构体 定义结构体使用struct关键字.在结构体内部定义它们的成员变量和类型.如果成员变量的类型相同还可以把它们写到同一行. struct里面可以包含多个字段(属性) struct类型可以定义方 ...

  5. 手把手教你如何安装和使用Karma-Jasmine

    注意:本文中出现的资料链接.karma的插件安装等,均可能需要翻$墙后才能正确执行. Jasmine是一个Javascript的测试工具,在Karma上运行Jasmine可完成Javascript的自 ...

  6. HTTP cache in depth

    HTTP cache in depth HTTP 缓存 https://developers.google.com/web/fundamentals/performance/optimizing-co ...

  7. python 各模块

    01 关于本书 02 代码约定 03 关于例子 04 如何联系我们 1 核心模块 11 介绍 111 内建函数和异常 112 操作系统接口模块 113 类型支持模块 114 正则表达式 115 语言支 ...

  8. Python Standard Library

    Python Standard Library "We'd like to pretend that 'Fredrik' is a role, but even hundreds of vo ...

  9. 在mybatis中写sql语句的一些体会

    本文会使用一个案例,就mybatis的一些基础语法进行讲解.案例中使用到的数据库表和对象如下: article表:这个表存放的是文章的基础信息 -- ------------------------- ...

随机推荐

  1. java数据类型学习

    java数据类型基本分为两类: 一类为基本数据类型: 数值类型: 整数类型:byte.short.int.long 浮点类型:float.double 字符类型:char 布尔类型:boolean 一 ...

  2. mysql锁死的现象判断

    一般发生表锁死这种低级问题,就有两种情况:1.程序员水平太菜,2.程序逻辑错误. 一旦发生系统会出现超时,关键是有可能你看不到正在活动的php进程,而系统的慢查询日志也不会记录,只能通过show fu ...

  3. SQL中distinct的用法和left join查询的含义

    SQL中distinct的用法   1.作用于单列 2.作用于多列 3.COUNT统计 4.distinct必须放在开头 5.其他 在表中,可能会包含重复值.这并不成问题,不过,有时您也许希望仅仅列出 ...

  4. winform 窗体大小变化时,如何设置使控件一起按照比例变大

    public Form() { InitializeComponent(); + ; float[] factor = new float[count]; ; factor[i++] = Size.W ...

  5. Bootstrap_Javascript_提示框

    一. 结构分析 在Bootstrap框架中的提示框,结构非常简单,常常使用的是按钮<button>标签或者链接<a>标签来制作.不管是使用按钮还是链接来制作提示框,他们都有一个 ...

  6. android 开源项目学习

    1.Android团队提供的示例项目 如果不是从学习Android SDK中提供的那些样例代码开始,可能没有更好的方法来掌握在Android这个框架上开发.由Android的核心开发团队提供了15个优 ...

  7. C++函数重载遇到了函数默认参数情况

    一.C++中的函数重载 什么是函数重载? 我的理解是: (1)用一个函数名定义不同的函数: (2)函数名和不同参数搭配时函数会有不同的含义: 举例说明: #include <stdio.h> ...

  8. Fiddle的应用

    在Composer中输入测试的网址: 可能会发生一下情况,这意味着需要在左侧面板中选择一项,来看回应:   选择一个请求后,选择TextView,看原生的回应(Response)内容

  9. JS拖动div的原理

    要实现移动窗体,首先要捕获三个参数:1.a = 鼠标点击时的坐标.2.b = 被移动窗体的左顶点坐标.3.c = 鼠标移动时的坐标.然后还要算出你鼠标无论点击窗体哪个位置,移动改变的都是 (d = 窗 ...

  10. MVC身份验证及权限管理

    MVC自带的ActionFilter 在Asp.Net WebForm的中要做到身份认证微软为我们提供了三种方式,其中最常用的就是我们的Form认证,需要配置相应的信息.例如下面的配置信息: < ...