关于使用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. 只读:readonly,不能修改数据库数据,可以并发执行
  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索引的使用~

转载于:https://www.cnblogs.com/constructor/p/4422350.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/291498.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

BCVP开发者社区2022专属周边第一弹

BCVP TeamBCVP开发者社区是博主老张的哲学发起,鼓励每个人都可参与的一个分享社区,目前已经有12个参与者,19个开源项目。欢迎加入BCVP,获取专属周边礼品(文末有介绍)。官方博客还在筹建中,预计2…

C++之类模板最简单的使用

1、说明类模板 1) 声明类模板时要增加一行 template <class 类型参数名> template意思是“模板”,是声明类模板时必须写的关键字。在template后面的尖括号内的内容为模板的参数表列,关键字class表示其后面的是类型参数 2、写代码理解 3、运行结果 4、总结 上…

mysql 5.5主从同步_MySQL5.5+配置主从同步并结合ThinkPHP5设置分布式数据库

This browser does not support music or audio playback. Please play it in WeChat or another browser.前言&#xff1a;本文章是在同处局域网内的两台windows电脑&#xff0c;且MySQL是5.5以上版本下进行的一主多从同步配置&#xff0c;并且使用的是集成环境工具PHPStudy为…

C# 10的新特性

点击上方蓝字关注我们&#xff08;本文阅读所需15分钟&#xff09;我们很高兴地宣布 C# 10 作为 .NET 6 和 Visual Studio 2022的一部分已经发布了。在这篇文章中&#xff0c;我们将介绍 C# 10 的许多新功能&#xff0c;这些功能使您的代码更漂亮、更具表现力、更快。阅读 Visu…

C++编译出现binding ‘const string {aka const std::__cxx11::basic_string<char>}’ to reference of type ‘std

编译异常如下&#xff1a; 解决办法&#xff1a; 我的函数是这样的 string &larger(const string &s1, const string &s2){return s1.size() > s2.size()? s1 : s2; }改成这样就行了 const string &larger(const string &s1, const string &s2){r…

POJ 3181 Dollar Dayz DP

f[i][j]f[i-j][j]f[i][j-1]&#xff0c;结果很大需要高精度。 //#pragma comment(linker, "/STACK:1024000000,1024000000") #include<cstdio> #include<cstring> #include<cstdlib> #include<algorithm> #include<iostream> #include…

.NET再出发!20岁生日快乐

.NET 20周年纪念2022年是.NET20周年纪念&#xff0c;一个技术能经历20个年头&#xff0c;也说明了它的成功。想起和 .NET刚接触的时候&#xff0c;我还是一个大一的学生&#xff0c;现在也已经步入中年。作为一名80后开发者&#xff0c;我相信很多同龄人和我一样经历了中国甚至…

C++之invalid initialization of non-const reference of type ‘int’ from an rvalue of type ‘int’

1、看代码 2、编译结果 3、分析和解决 就拿f(a + b)来说,a+b的值会存在一个临时变量中,当把这个临时变量传给f时,由于f的声明中,参数是int&,不是常量引用,因为c++编译器的一个关于语义的限制。如果一个参数是以非const引用传入,c++编译器就有理由认为程序员会在函数…

mysql cbo优化器_查询优化器介绍 - PolarDB-X 云原生分布式数据库 - 阿里云

PolarDB-X接收到一条SQL后的执行过程大致如下&#xff1a;语法解析器(Parser)将SQL文本解析成抽象语法树(AST)。语法树被转化成基于关系代数的逻辑计划。优化器(Optimizer)对逻辑计划进行优化得到物理计划。执行器(Executor)执行该计划&#xff0c;得到查询结果并返回给用户。本…

这周,我们作前端,实现统一的过滤搜索

这周统一了过滤和搜索样式&#xff0c; 作个记录。 还自己写了两个css样式&#xff0c;长见识了。 filter.html {% load staticfiles %}<link rel"stylesheet" href"{% static css/select2.min.css%}" /> <link rel"stylesheet" href&q…

找最大重复次数的数和重复次数(C++ Pair)

Problem A: 第一集 你好&#xff0c;世界冠军 Time Limit: 10 Sec Memory Limit: 128 MBSubmit: 265 Solved: 50[Submit][Status][Web Board]Description “我宣布&#xff0c;第十届国际程序设计竞赛现在开始&#xff01;本次比赛时间为9点到14点……”伴随着大赛主席的宣布…

观察者模式VS发布-订阅模式

前言观察者模式的大名&#xff0c;想必各位看官早已有所耳闻。从我们现实生活来说&#xff0c;微信公众号订阅、医院挂号叫号等都属于它的实际应用。在程序世界中&#xff0c;它是一种用于将代码解耦的设计模式&#xff0c;如果你想掌握并理解这种设计模式&#xff0c;今天就和…

Kubernetes 集群和应用监控方案的设计与实践

目录Kubernetes 监控监控对象Prometheus指标实践节点监控部署 Prometheus部署 Kube State Metrics部署 Grafana应用如何接入 Prometheus 和 Grafana告警Kubernetes 监控当你的应用部署到 Kubenetes 后&#xff0c;你很难看到容器内部发生了什么&#xff0c;一旦容器死掉&#x…

全局照明算法基础——从辐射亮度到渲染方程

全局照明&#xff08;Global Illumination&#xff09;问题上已经有很多著名的算法&#xff0c;如路径追踪&#xff08;Path Tracing&#xff09;&#xff0c;辐照度&#xff08;Radiosity&#xff09;等。绝大部分书籍/教材都直接介绍了做法&#xff0c;在理论方面有所欠缺&am…

系统下载地址

系统下载地址 http://pan.baidu.com/s/1o6hVbPC 其中有xp win7和win8 32位 win7和win8 64位转载于:https://blog.51cto.com/freedom886/1403433

聊一聊DTM子事务屏障功能之SQL Server版

背景 前面写了两篇&#xff08;聊一聊如何用C#轻松完成一个SAGA分布式事务和聊一聊如何用C#轻松完成一个TCC分布式事务&#xff09;如何用 C# 基于 DTM 轻松实现 SAGA 和 TCC 的分布式事务&#xff0c;其中有一个子事务屏障的功能&#xff0c;很好的处理了空补偿、悬挂、重复请…

ORA-00257+mysql_ORA-00257错误的解决办法

author&#xff1a; headsen chendate&#xff1a; 2018-04-17 11:12:39notice&#xff1a;个人原创&#xff0c;转载请注明作者和出处&#xff0c;否则依法追击法律责任。1&#xff0c;oracle数据库正常使用中&#xff0c;突然报ora-00257的错误&#xff0c;原因是归档日志满…

学习路线

为什么80%的码农都做不了架构师&#xff1f;>>> 一、构想 1.专门制定某领域学习路线。 2.为人们进入某领域而学习提供依据。 转载于:https://my.oschina.net/kun123/blog/838360

数字图像处理技术在TWaver可视化中的应用

数字图像处理&#xff08;Digital Image Processing&#xff09;又称为计算机图像处理&#xff0c;它是指将图像信号转换成数字信号并利用计算机对其进行处理的过程。常用的图像处理方法有图像增强、复原、编码、压缩等&#xff0c;数字图像处理应用领域非常广泛。具体关于数字…

WPF 实现调用本机摄像头~

WPF开发者QQ群&#xff1a;340500857由于微信群人数太多入群请添加小编微信号yanjinhuawechat 或 W_Feng_aiQ 邀请入群需备注WPF开发者 PS&#xff1a;有更好的方式欢迎推荐。接着很久前的上一篇此项目使用了OpenCVSharp加载本地摄像头&#xff0c;多个摄像头支持切换展示&…