关于使用indexedDB的本地存储(2)

我又回来了~这几天估计没喝茶,每天头都晕晕的,昨晚上和室友看了素鸡7,伤心啊,自己一直都喜欢这个系列,感觉童年真的是渐行渐远了……

上一篇说到了哪些内容我这里罗列一下

建立和打开数据库、删除数据库、判断objectStore是否存在和建立一个不同键类型的objectStore,此时发现内容好少啊,大部分都是在测试,不过我觉得详细的测试还是很重要的。

说完了建立一个objectStore,现在我们来说删除一个objectStore,经过我的测试,这个也是有坑的存在,删除objectStore必须是在upgradeneeded事件中触发

在上一篇文中,IDBDatabase对象贴图里面我们看到了删除objectStore的API,是deleteObjectStore

request.onsuccess = function(ev){
    var db = ev.target.result;
    alert(‘这里是success‘);
    if(db.objectStoreNames.contains(‘students‘)){
        db.deleteObjectStore(‘students‘);
        alert(‘删除成功!‘);
    }
    //window.indexedDB.deleteDatabase(‘test‘);    这句不用看
}

我的本意是当我点击clear的时候触发这段代码,然后将‘students‘这个objectStore干掉,谁知道是我被干掉了~报错如图~

The database is not running a version change transaction翻译是

这个数据库没有运行在一个版本变动的失误中,导致了deleteObjectStore失败

我当时整个人都震惊了,为什么需要这样。不过既然它这样说了,我们就让这个delete行为发生在一个version change中看看

request.onupgradeneeded = function(ev){
    var db = ev.target.result;

    if(db.objectStoreNames.contains(‘students‘)){
        db.deleteObjectStore(‘students‘);
        alert(‘删除成功!‘);
    }
}

注意:记得window.indexedDB.open(DBname, version)时,version变大,这样才会触发upgradeneeded

果然和我们预想的一样~没有报错,成功清除了‘students‘这个objectStore,也使其所在的test数据库version变化了,为什么会这样设计,我也不知道……如果有知道的大神路过,求指点~

这时候我们等于学完了database的相关操作,tables(objectStore)的相关操作,下面就是核心的增删改查啦

学习增删改查之前先给大家介绍一个新的名词就是事务(transaction)

注意:在indexedDB中所有具体的objectStore的操作,都需要通过transaction

事务有三种模式,网上都有,我也把罗列一下

  1. 只读:read,不能修改数据库数据,可以并发执行
  2. 读写:readwrite,可以进行读写操作
  3. 版本变更,versionchange

如何获取一个事务?

var transaction = db.transaction(arg1, arg2);    //db是IDBDatabase对象

arg1可以使一个字符串=>‘students‘,也可以是一个字符串数组=>[‘students‘, ‘teachers‘]

arg2是事务的模式,就是上面罗列的三种

此时得到的transaction是一个IDBTransaction对象,我们console.log输出看一下

看1,oncomplete,我看到这个第一反应就是这玩意需要异步回调使用,结果我多次测试发现不需要的,得到的transaction可以直接使用,想怎么用就怎么用,比如:

var transaction = db.transaction(‘students‘, ‘readwrite‘);
var objectStore = transaction.objectStore(‘students‘);  //①,这个方法就是上面红色箭头2

//根本不需要下面这样
/*
   transaction.oncomplete = function(){
     objectStore = this.objectStore(‘students‘);
     balabalabala....
    }
*/

①这里就是通过我们的IDBTransaction对象得到了我们需要操作的objectStore,transaction只是一个帮手,而得到的objectStore才是操作的主体

console.log看看~

注意:indexNames啊,createIndex啊,凡是与index相关的属性方法,是关于索引的,下一篇再说,这里我们只看1~6这几个方法

1、add添加数据

var result = objectStore.add({number:99, name:‘tt‘});
result.onsuccess = function(ev){
  alert(‘插入成功!‘);
}

嗯哼,看到这样写想起来文章开篇就说的indexedDB的操作是异步的了吧~

注意:add后面的参数只能是对象,不能是数组~

2、clear清空数据

var result = objectStore.clear();
result.onsuccess = function(ev){
  alert(‘清空成功!‘);
}

3、count找到存储数量

var result = objectStore.count();
result.onsuccess = function(ev){
    alert(‘数量为‘ + ev.target.result);
}

记得通过result属性得到返回值,再一次提醒异步操作!

4、delete删除指定数据

var result = objectStore.delete(‘11‘);
result.onsuccess = function(ev){
    alert(‘key为‘ + 11 + ‘已经删除成功!‘);
}

delete的参数是key值

注意:如果你传递给它一个不存在的key值,它同样触发success事件,不过数据库里面没有变化就是了。比如将‘11‘改成‘aa‘

5、get找到数据

var result = objectStore.get(‘22‘);
result.onsuccess = function(ev){
    console.log(ev.target.result);
}

6、put更新对象

这里比较麻烦,要分两种情况

①,对象key不一样时候put,此时相当于add

var result = objectStore.put({number: ‘aa‘, name: ‘ggg‘});
result.onsuccess = function(ev){
    alert(‘put此时的作用和add是一样一样的‘);
}

②,已经存在key时put,此时覆盖原数据

var result = objectStore.put({number: ‘aa‘, name: ‘ttt‘});
result.onsuccess = function(ev){
    alert(‘覆盖了刚刚put进来的"ggg"‘);
}

嗯~这一篇就告一段落啦,感觉自己介绍的还是很详细的,如果有错误请指出,谢谢~

下次介绍indexedDB索引的使用~

时间: 2024-11-11 07:47:28

关于使用indexedDB的本地存储(2)的相关文章

关于使用indexedDB的本地存储(1)

这两天在复习本地存储,再一次感叹我们这些学前端的真是生活在一个幸福的时代啊~ 废话不多说,本地存储的方式相信大家都知道,cookie,storage(分为sessionStorage和localStorage)还有IndexedDB Web SQL基本上淘汰了,这里就不讨论了啊 先简要介绍一下上面几个 cookie大家都知道,对存储有限制,每组大小在4KB样的,而且每次请求服务器会增加头信息 sessionStorage是session的临时会话,存在于从页面打开到页面关闭时间,页面关闭,存储也

HTML5 indexedDB前端本地存储数据库实例教程 (转载)

一.indexedDB为何替代了Web SQL Database? 跟小朋友的教育从来没有什么“赢在起跑线”这种说法一样,在前端领域,也不是哪来先出来哪个就在日后引领风骚的. HTML5 indexedDB和Web SQL Database都是本地数据库数据存储,Web SQL Database数据库要出来的更早,然并卵.从2010年11月18日W3C宣布舍弃Web SQL database草案开始,就已经注定Web SQL Database数据库是明日黄花. 未来一定是indexedDB的,从

HTML5本地存储IndexedDB基础使用

做项目时需要用H5本地存储,感觉还不错 下面是一些基础知识和一个完整的实例 HTML5 的一个重要特性是本地数据持久性,它使用户能够在线和离线访问 Web 应用程序.此外,本地数据持久性使移动应用程序更灵敏,使用的带宽更少,而且能够在低带宽场景中更高效地工作.HTML5 提供了一些本地数据持久性选项.第一个选项是 localstorage,它支持您使用一个简单的键值对来存储数据.IndexedDB(一个更加强大的选项)支持您本地存储大量对象,并使用健壮的数据访问机制检索数据. IndexedDB

html5本地存储之indexedDb

对于以下需求: 离线存储读取数据 允许用户对数据进行增删改操作 数据存储在本地,不依赖后端 数据支持索引查询 我们可以考虑使用html5新特性的本地存储,主要有以下几种: Web Sql(IE,FF都不支持,http://www.w3.org/TR/webdatabase/) IndexedDB Local Storage(轻松存储简单的数据结构,如果存储复杂的较麻烦) Session Storage(同Localstorage) Cookies(有限制) Application Cache(随

cookie本地存储

本地存储 所谓的本地存储,其实就是把一些信息,存储到客户端版本地,存储的信息不会因为页面的跳转或关闭而消失,这样就可以实现很多功能需求了. 特点 虽然是存储到本地了,但是有浏览器中间的访问限制,例如:谷歌下存储的信息在IE中访问不到 还会存在域名和域名之间的访问限制,例如:在谷歌下访问京东,存储了京东的客户信息,当我们用谷歌浏览器打开了百度,百度是无法获取原来在京东下存储的本地信息的 本地存储应用的案例: 登录的时候,记住用户名和密码,其实就是把信息存储到客户端本地,下一次再打开页面的时候,直接

常用的本地存储-----cookie篇

1.引言 随着浏览器的处理能力不断增强,越来越多的网站开始考虑将数据存储在「客户端」,那么久不得不谈本地存储了. 本地存储的好处: 一是避免取回数据前页面一片空白,如果不需要最新数据也可以减少向服务器的请求次数,从而减少用户等待从服务端获取数据的时间. 二是网络状态不佳时仍可以显示离线数据. 2.本地存储 用chrome浏览器打开一个网页,F12进入开发者模式,点击Application,我们可以看到: 以上的Local Stroage . Session Stroage . IndexedDB

[转]Dcloud App离线本地存储方案

原文地址:http://ask.dcloud.net.cn/article/166 HTML5+的离线本地存储有如下多种方案:HTML5标准方案:cookie.localstorage.sessionstorage.websql.indexedDBHTML5Plus扩展方案:plus.storage.plus.io cookie体量最小,可以设置过期时间. localstorage适合key.value键值对的存储,数据量一般不超过5M.是常用的轻量数据存储方案. sessionstorage也

HTML5新增核心工具——本地存储

除了Canvas元素外,HMTL5另外一个新增的非常重要的功能是可以在客户端本地存储数据库的Web Storage.本文就介绍下Web Storage以及SQLLite操作. Web Storage分为两类: - sessionStorage:数据保存在session 对象中(临时) - localStorage:数据保存在本地硬件设备中(永久) sessionStorage: 保存数据的两种方法: sessionStorage.setItem('key','val'); sessionStor

HTML5本地存储localStorage与sessionStorage

在最近的项目中用到了html5的本地存储,下面总结一下. 1.html5几种存储形式 本地存储(localStorage && sessionStorage) 离线缓存(application cache) indexedDB 和 webSQL 2.localStorage && sessionStorage 过期时间:localStorage 永久存储,永不失效除非手动删除 sessionStorage 浏览器重新打开后就消失了 大小:每个域名是5M. 注:cookie一