[PWA] 12. Intro to IndexedDB

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‘);
});

时间: 2024-10-22 01:15:37

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

[PWA] 1. Intro to Service worker

Service worker stays between our browser and noetwork requests. It can help to fetch data from cache and cache the data from Internet. To get our service worker, we need to : Register the service worker. Service worker in our code is just a javascirp

html5本地存储(三)--- 本地数据库 indexedDB

html5内置了2种本地数据库,一是被称为"SQLLite",可以通过SQL语言来访问文件型SQL数据库.二是被称为"indexedDB" 的NoSQL类型的数据库,本篇主要讲indexedDB数据库. 该数据库是一种存储在客户端本地的NoSQL数据库,目前chrome11以上.Firefox4以上.Opera18以上.Safar8以上及IE10以上的浏览器提供支持 一.连接数据库 使用indexedDB.open方法连接数据库 var dbName = 'inde

客户端(浏览器端)数据存储技术概览

客户端(浏览器端)存储数据有诸多益处,最主要的一点是能快速访问(网页)数据.目前常见的浏览器端数据存储方法有:Cookies,Local Storage,Session Storage,IndexedDB. Cookies Cookies 是一种在文档内存储字符串数据最典型的方式.一般而言,cookies 会由服务端发送给客户端,客户端存储下来,然后在随后让请求中再发回给服务端.这可以用于诸如管理用户会话,追踪用户信息等事情. 此外,客户端也用使用 cookies 存储数据.因而,cookies

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

注意:本文中出现的资料链接.karma的插件安装等,均可能需要翻$墙后才能正确执行. Jasmine是一个Javascript的测试工具,在Karma上运行Jasmine可完成Javascript的自动化测试.生成覆盖率报告等.本文不包含Jasmine的使用细节,这几天我会写一篇Jasmine的入门文章,有兴趣的朋友到时候可以看一下. 步骤一:安装Node.JS(版本:v0.12.4, windows-64) Karma是运行在Node.js之上的,因此我们首先要安装Node.js.到 http

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

karma启动时出现了很多问题: 1.安装karma前提条件 安装karma首先要安装nodejs,npm然后才可以安装karma.nodejs,npm的安装过程可以参考文章:Angularjs学习---angularjs环境搭建,ubuntu 12.04下安装nodejs.npm和karma 2.安装karma步骤 karma官方指导教程:http://karma-runner.github.io/0.12/intro/installation.html 1).首先执行下面命令: npm in

javascript 自动化单元测试

#JavaScript 自动化单元测试 - 为什么要进行自动化测试? - 什么项目适合做自动化测试? - 测试运行器 karma - 测试框架 jasmine ### 为什么要进行自动化测试? 1. 正确性:验证代码的正确性 2. 自动化:一次编写,多次运行 3. 解释性:阅读测试用例,有时比文档说明更清晰 4. 驱动开发:快速反馈提高开发效率 5. 保证重构:测试用例做后盾,就可以大胆的进行重构持续集成 ### 什么项目适合做自动化测试? 自动化的收益 = 迭代次数 * (全手动执行成本 -

laytpl--前端数据绑定

发现一枚前端数据绑定导弹:laytpl,官网:http://www.layui.com/laytpl/ 为了不用angularJS等较为重量级的,和繁琐的配置,所以就用了laytpl,可以配合JQ使用 laytpl.js源码如下: /** @Name:laytpl-v1.1 精妙的js模板引擎 @Author:贤心 - 2014-08-16 @Site:http://sentsin.com/layui/laytpl @License:MIT license */ ;!function(){"us

Karma-Jasmine 安装和使用

注意:本文中出现的资料链接.karma的插件安装等,均可能需要翻$墙后才能正确执行. Jasmine是一个Javascript的测试工具,在Karma上运行Jasmine可完成Javascript的自动化测试.生成覆盖率报告等.本文不包含Jasmine的使用细节,这几天我会写一篇Jasmine的入门文章,有兴趣的朋友到时候可以看一下. 步骤一:安装Node.JS(版本:v0.12.4, windows-64) Karma是运行在Node.js之上的,因此我们首先要安装Node.js.到 http

vc编程中的20点小笔记

机器学习是一项经验技能,经验越多越好.在项目建立的过程中,实践是掌握机器学习的最佳手段.在实践过程中,通过实际操作加深对分类和回归问题的每一个步骤的理解,达到学习机器学习的目的. 预测模型项目模板不能只通过阅读来掌握机器学习的技能,需要进行大量的练习.本文将介绍一个通用的机器学习的项目模板,创建这个模板总共有六个步骤.通过本文将学到: 端到端地预测(分类与回归)模型的项目结构. 如何将前面学到的内容引入到项目中. 如何通过这个项目模板来得到一个高准确度的模板. 副诼匚盼胁臼匾膊讶赖期放判鼻懒合谖