[PWA] 13. New db and object store

时间:2022-10-31 02:42:17

Create a db:

import idb from 'idb';

var dbPromise = idb.open('test-db', 2, function (upgradeDb) {
switch (upgradeDb.oldVersion) {
case 0:
// keyval store is already created at version 1
var keyValStore = upgradeDb.createObjectStore('keyval');
keyValStore.put("world", "hello");
case 1:
// new version
upgradeDb.createObjectStore('people', {keyPath: 'name'});
}
});

The oldVersion switch between old db and new db. So here we create a new people db.

ReadWrite:

dbPromise.then(function (db) {
var tx = db.transaction('people', 'readwrite');
var peopleStore = tx.objectStore('people'); peopleStore.put({
name: "John", // name is the key
age: 23,
favoriteAnimal: 'cat'
});
peopleStore.put({
name: "Joe", // name is the key
age: 21,
favoriteAnimal: 'cat'
});
peopleStore.put({
name: "Jie", // name is the key
age: 22,
favoriteAnimal: 'dog'
});
peopleStore.put({
name: "Jay", // name is the key
age: 24,
favoriteAnimal: 'dog'
});
return tx.complete;
}).then(function () {
console.log("People are added");
}); dbPromise.then(function (db) {
var tx = db.transaction('people');
var peopleStore = tx.objectStore('people');
return peopleStore.getAll();
}).then(function (people) {
console.table(people);
});

Group By:
TO do gourp by we need to create index:

import idb from 'idb';

var dbPromise = idb.open('test-db', 3, function (upgradeDb) {
switch (upgradeDb.oldVersion) {
case 0:
// keyval store is already created at version 1
var keyValStore = upgradeDb.createObjectStore('keyval');
keyValStore.put("world", "hello");
case 1:
// new version
upgradeDb.createObjectStore('people', {keyPath: 'name'});
case 2:
var peopleStore = upgradeDb.transaction.objectStore('people');
peopleStore.createIndex('animal', 'favoriteAnimal');
}
});

Group by animal:

dbPromise.then(function (db) {
var tx = db.transaction('people');
var peopleStore = tx.objectStore('people');
var animalIndex = peopleStore.index('animal');
//return animalIndex.getAll(); // all the animals
return animalIndex.getAll('cat'); // only cat
}).then(function (people) {
console.table(people);
});

[PWA] 13. New db and object store

[PWA] 13. New db and object store的更多相关文章

  1. Ambry: LinkedIn’s Scalable Geo-Distributed Object Store

    https://github.com/linkedin/ambry http://www.open-open.com/lib/view/open1464828607502.html

  2. libhiredis.so.0.13: cannot open shared object file: No such file or director

    Hiredis安装步骤: tar zxvf antirez-hiredis-v0.10.1-0-g3cc6a7f.zip cd antirez-hiredis-3cc6a7f make 解决办法: m ...

  3. object store in javascript

  4. libhiredis.so.0.13: cannot open shared object file: No such file or directory in Unknown on line

    vim /etc/ld.so.conf添加 /usr/local/lib (此处为动态链接库的目录) ldconfig

  5. [PWA] 18. Clean the photo cache

    We cannot let photo always keep caching new data without clean the old data. If message is not displ ...

  6. [PWA] 15. Using The IDB Cache And Display Entries

    We want to use IDB to store the wittr messages. The logic is when the page start: service worker wil ...

  7. truncate table很慢之enq: RO - fast object reuse和local write wait等待分析

    使用ASSM表空间(默认模式)的时候,在dss系统中确实会出现truncate很慢的现象,但是他不会100%重现,得看概率.通过sql trace(对任何v$sysstat看起来资源消耗很低的情况,都 ...

  8. ODBC、OLE DB、 ADO的区别

    转自:http://blog.csdn.net/yinjingjing198808/article/details/7665577 一.ODBC ODBC的由来 1992年Microsoft和Syba ...

  9. 【转载】OLE DB, ADO, ODBC关系与区别

    原文:OLE DB, ADO, ODBC关系与区别 OLE DB, ADO, ODBC 一. ODBC(Open Database Connectivity,开放数据库互连)是微软公司开放服务结构(W ...

随机推荐

  1. encodeURIComponent编码后java后台的解码 (AJAX中文解决方案)

    encodeURIComponent编码后java后台的解码 (AJAX中文解决方案) 同学的毕业设计出现JavaScript用encodeURIComponentt编码后无法再后台解码的问题. 原来 ...

  2. BITMAP CONVERSION FROM ROWIDS

    在有些执行计划中,可以会看到 BITMAP CONVERSION FROM ROWIDS这样的东东,也许你会感觉奇怪,我没有使用位图索引怎么出现了bitmap.我通过一个sql和大家分析下原因:sql ...

  3. PHP正则表达式试题

    1.POSIX正则表达式扩展在PHP哪个版本被废弃了 2.请写出匹配任意数字,任意空白字符,任意单词字符的符号? 3.执行一个正则表达式匹配的函数是什么?返回的结果有哪些? 4.执行一个全局正则表达式 ...

  4. final、finally和finalize的区别

    final.finally和finalize的区别 这三者的区别可以从两个方面来说 1.意思解释方面 (1)final是修饰符(关键字) (2)finally是异常处理中的程序块 (3)finaliz ...

  5. Global.asax 中校验Session

    Application 相关的 Application_Init:在每一个HttpApplication实例初始化的时候执行. Application_Disposed:在每一个HttpApplica ...

  6. 不可思议的纯CSS导航栏下划线跟随效果

    先上张图,如何使用纯 CSS 制作如下效果? 在继续阅读下文之前,你可以先缓一缓.尝试思考一下上面的效果或者动手尝试一下,不借助 JS ,能否巧妙的实现上述效果. OK,继续.这个效果是我在业务开发的 ...

  7. React + antd 组件离开页面以后出现Can only update a mounted or mounting component 的解决办法

    做项目的过程中,来回切换页面时,一直遇到Can only update a mounted or mounting component 这个问题,原因是当离开页面以后,组件已经被卸载,执行setSta ...

  8. 【Java并发编程】6、volatile关键字解析&内存模型&并发编程中三概念

    volatile这个关键字可能很多朋友都听说过,或许也都用过.在Java 5之前,它是一个备受争议的关键字,因为在程序中使用它往往会导致出人意料的结果.在Java 5之后,volatile关键字才得以 ...

  9. async源码学习 - 全部源码

    因为工作需要,可能我离前端走远了,偏node方向了.所以异步编程的需求很多,于是乎,不得不带着学习async了. 我有个习惯,用别人的东西之前,喜欢稍微搞明白点,so就带着看看其源码. github: ...

  10. this是什么!

    this 1.js的关键字指定一个对象,然后去替代他 函数内的this    函数外的this 函数内的this指向行为发生的主体 函数外的this都指向window 2.函数内的this和函数在什么 ...