indexed database IndexedDB

Indexed Database API 目的是提供一个可供javascript存储和检索对象,并且还能进行查询,搜索等数据库操作

设计为几乎完全异步,因此绝大部分操作都稍后执行,因此每次操作都应该提供onerror和onsuccess来处理结果

目前还没有完全支持,因此:var indexedDB = window.indexedDB || window.msIndexedDB || window.mozIndexedDB || window.webkitIndexedDB;

IndexedDB 和MySQL最大的区别在于用对象存储而不是表格来记录数据

const dbName = "the_name";

var request = indexedDB.open(dbName, 2);

request.onerror = function(event) {
  // Handle errors.
};
request.onupgradeneeded = function(event) {
  var db = event.target.result;

  // Create an objectStore to hold information about our customers. We‘re
  // going to use "ssn" as our key path because it‘s guaranteed to be
  // unique.
  var objectStore = db.createObjectStore("customers", { keyPath: "ssn" });

  // Create an index to search customers by name. We may have duplicates
  // so we can‘t use a unique index.
  objectStore.createIndex("name", "name", { unique: false });

  // Create an index to search customers by email. We want to ensure that
  // no two customers have the same email, so use a unique index.
  objectStore.createIndex("email", "email", { unique: true });

  // Use transaction oncomplete to make sure the objectStore creation is
  // finished before adding data into it.
  objectStore.transaction.oncomplete = function(event) {
    // Store values in the newly created objectStore.
    var customerObjectStore = db.transaction("customers", "readwrite").objectStore("customers");
    for (var i in customerData) {
      customerObjectStore.add(customerData[i]);
    }
  }};
时间: 2024-11-06 19:31:57

indexed database IndexedDB的相关文章

H5缓存机制浅析-移动端Web加载性能优化【干货】

转载:H5缓存机制浅析-移动端Web加载性能优化[干货] 作者:贺辉超,腾讯游戏平台与社区产品部 高级工程师 目录 1 H5缓存机制介绍 2 H5缓存机制原理分析 2.1 浏览器缓存机制 2.2 Dom Storgage(Web Storage)存储机制 2.3 Web SQL Database存储机制 2.4 Application Cache(AppCache)机制 2.5 Indexed Database (IndexedDB) 2.6 File System API 3 移动端Web加载

H5 缓存机制浅析 移动端 Web 加载性能优化

1 H5 缓存机制介绍 H5,即 HTML5,是新一代的 HTML 标准,加入很多新的特性.离线存储(也可称为缓存机制)是其中一个非常重要的特性.H5 引入的离线存储,这意味着 web 应用可进行缓存,并可在没有因特网连接时进行访问. H5 应用程序缓存为应用带来三个优势: 离线浏览 用户可在应用离线时使用它们 速度 已缓存资源加载得更快 减少服务器负载 浏览器将只从服务器下载更新过或更改过的资源. 根据标准,到目前为止,H5 一共有6种缓存机制,有些是之前已有,有些是 H5 才新加入的. 浏览

IndexedDB: 浏览器里内置的数据库简介

一.概述: 所有的应用程序都需要"数据"支持.对于大多数的Web应用程序来说,数据是在服务器端进行组织和整理,然后由客户端(浏览器端)通过网络请求获取.随着浏览器的处理能力不断增强,可以在浏览器端存储和操纵应用程序需要的数据,因此越来越多的网站开始考虑,将大量数据储存在本地客户端,这样可以减少用户等待从服务器端获取数据的时间. 现有的浏览器端数据储存方案,都不适合储存大量数据.Cookie不超过4KB,且每次请求都会发送回服务器端:Window.name属性缺乏安全性,且没有统一的标准

基于IndexedDB实现简单文件系统

现在的indexedDB已经有几个成熟的库了,比如西面这几个,任何一个都是非常出色的. 用别人的东西好处是上手快,看文档就好,要是文档不太好,那就有点尴尬了. dexie.js :A Minimalistic Wrapper for IndexedDB zangodb:MongoDB-like interface for HTML5 IndexedDB localForage:Offline storage, improved. Wraps IndexedDB, WebSQL, or local

H5缓存机制学习记录

参考文章:http://mp.weixin.qq.com/s?__biz=MTEwNTM0ODI0MQ==&mid=404724239&idx=1&sn=e0a2887f9ff6293f0f550fa4e44057a0&scene=1&srcid=0331jLkF55dKeJO00POMiXLZ 1.浏览器缓存机制 2.Dom Storage(local storage 和 session storage) 3.Web SQL Database,不推荐使用. 根据官

JS高级程序设置笔记(六)

22.1.2 作用域安全的构造函数 作用域安全的构造函数在进行任何更改前,首先确认this 对象是正确类型的实例.如果不是,那 么会创建新的实例并返回. 多个程序员在同一个页面上写JavaScript 代码的环境中,作用域安全构造函数就很有用了.届时, 对全局对象意外的更改可能会导致一些常常难以追踪的错误.除非你单纯基于构造函数窃取来实现继 承,推荐作用域安全的构造函数作为最佳实践. 22.1.3 惰性载入函数 惰性载入表示函数执行的分支仅会发生一次.有两种实现惰性载入的方式,第一种就是在函数被

9大浏览器端缓存机制分析

浏览器缓存(Browser Caching)是浏览器端保存数据用于快速读取或避免重复资源请求的优化机制,有效的缓存使用可以避免重复的网络请求和浏览器快速地读取本地数据,整体上加速网页展示给用户.浏览器端缓存的机制种类较多,总体归纳为九种,这里详细分析下这九种缓存机制的原理和使用场景.打开浏览器的调试模式->resources左侧就有浏览器的8种缓存机制. 一.http缓存 http缓存是基于HTTP协议的浏览器文件级缓存机制.即针对文件的重复请求情况下,浏览器可以根据协议头判断从服务器端请求文件

HTML5的五种客户端离线存储方案

最近折腾HTML5游戏需要离线存储功能,便把目前可用的几种HTML5存储方式研究了下,基于HT for Web写了个综合的实例,分别利用了Cookie.WebStorage.IndexedDB以及FileSystem四种本地离线存储方式,对燃气监控系统的表计位置.朝向.开关以及表值等信息做了CURD的存取操作. http://www.hightopo.com/guide/guide/core/serialization/examples/example_exportimport.html HTM

HTML5 学习笔记(一)——HTML5概要与新增标签

一.HTML5概要 1.1.为什么需要HTML5 HTML4陈旧不能满足日益发展的互联网需要,特别是移动互联网.为了增强浏览器功能Flash被广泛使用,但安全与稳定堪忧,不适合在移动端使用(耗电.触摸.不开放). HTML5增强了浏览器的原生功能,符合HTML5规范的浏览器功能将更加强大,减少了Web应用对插件的依赖,让用户体验更好,让开发更加方便,另外W3C从推出HTML4.0到5.0之间共经历了17年,HTML的变化很小,这并不符合一个好产品的演进规则. 1.2.什么是HTML5 HTML5