https://developer.mozilla.org/zh-CN/docs/Web/API/IndexedDB_API

在前一个阶段的工作中,项目组要开发一个平台,为了做出更好的用户体验,实现快速、高质量的交互,从而更快得到用户的反馈,要求在前端把数据存储起来,之后我去研究了下现在比较流行的前端存储数据库,找到了indexedDB,于是便对indexedDB做了一个较为深入的探索,此文就是记录探索过程的一些心得体会。

indexedDB为何物

在使用一个技术之前,先搞清楚它是什么,这对你的理解很重要,从DB就可以看出,它肯定是一个数据库,而说到数据库,有两种不同类型的数据库,就是关系型数据库和非关系型数据库,关系型数据库如Mysql、Oracle等将数据存储在表中,而非关系型数据库如Redis、MongoDB等将数据集作为个体对象存储。indexedDB就是一个非关系型数据库,它不需要你去写一些特定的sql语句来对数据库进行操作,因为它是nosql的,数据形式使用的是json

indexedDB出现的意义

也许熟悉前端存储的会说,不是有了LocalStorage和Cookies吗?为什么还要推出indexedDB呢?其实对于在浏览器里存储数据,你可以使用cookies或local storage,但它们都是比较简单的技术,而IndexedDB提供了类似数据库风格的数据存储和使用方式。

首先说说Cookies,英文直接翻译过来就是小甜点,听起来很好吃,实际上并不是,每次HTTP接受和发送都会传递Cookies数据,它会占用额外的流量。例如,如果你有一个10KB的Cookies数据,发送10次请求,那么,总计就会有100KB的数据在网络上传输。Cookies只能是字符串。浏览器里存储Cookies的空间有限,很多用户禁止浏览器使用Cookies。所以,Cookies只能用来存储小量的非关键的数据。

其次说说LocalStorage,LocalStorage是用key-value键值模式存储数据,但跟IndexedDB不一样的是,它的数据并不是按对象形式存储。它存储的数据都是字符串形式。如果你想让LocalStorage存储对象,你需要借助JSON.stringify()能将对象变成字符串形式,再用JSON.parse()将字符串还原成对象。但如果要存储大量的复杂的数据,这并不是一种很好的方案。毕竟,localstorage就是专门为小数量数据设计的,所以它的api设计为同步的。而IndexedDB很适合存储大量数据,它的API是异步调用的。IndexedDB使用索引存储数据,各种数据库操作放在事务中执行。IndexedDB甚至还支持简单的数据类型。IndexedDB比localstorage强大得多,但它的API也相对复杂。对于简单的数据,你应该继续使用localstorage,但当你希望存储大量数据时,IndexedDB会明显的更适合,IndexedDB能提供你更为复杂的查询数据的方式。

indexedDB的基本使用方法 https://www.cnblogs.com/dengyulinBlog/p/6141636.html

indexedDB为何物的更多相关文章

  1. 前端存储之indexedDB

    在前一个阶段的工作中,项目组要开发一个平台,为了做出更好的用户体验,实现快速.高质量的交互,从而更快得到用户的反馈,要求在前端把数据存储起来,之后我去研究了下现在比较流行的前端存储数据库,找到了ind ...

  2. IndexedDB(本地存储)

    var students = [{ id: 1001, name: "Byron", age: 24 }, { id: 1002, name: "Frank", ...

  3. HTML5存储之 indexedDB

    IndexeDB是HTML5 重要的一部分,它是一种轻量级的NOSQL数据库.对创建具有丰富本地存储数据的数据密集型的离线HTML5 Web 应用程序很有用. IndexedDB是为了能够在客户端存储 ...

  4. Notes:indexedDB使用

    indexedDB是浏览器端保存结构化数据的一种数据库,类似于mysql,oracle等数据库,但indexedDB使用对象存储数据,而不是用表. indexedDB是全局的宿主对象,使用window ...

  5. 由面试引发的思考:B/S与C/S究竟是何物

    一.现状说明: 就在这金三银四的求职黄金时期,我有幸作为公司的独立技术面试官,拥有最终决定录用权,在倍受上级领导的充分信任下,我也向上级保证,一定要为公司找到合适的人才,就在我满怀信心的情况下面试了一 ...

  6. HTML5本地存储——IndexedDB(一:基本使用)

    在HTML5本地存储——Web SQL Database提到过Web SQL Database实际上已经被废弃,而HTML5的支持的本地存储实际上变成了 Web Storage(Local Stora ...

  7. IndexedDB参考资料网址

    IndexedDB:浏览器里内置的数据库, Web骇客 http://www.webhek.com/indexeddb/ 前端的数据库:IndexedDB入门(很全面) http://web.jobb ...

  8. HTML5本地存储——IndexedDB(二:索引)

    在HTML5本地存储——IndexedDB(一:基本使用)中介绍了关于IndexedDB的基本使用方法,很不过瘾,这篇我们来看看indexedDB的杀器——索引. 熟悉数据库的同学都知道索引的一个好处 ...

  9. js IndexedDB:浏览器端数据库的demo实例

    IndexedDB具有以下特点. (1)键值对储存. IndexedDB内部采用对象仓库(object store)存放数据.所有类型的数据都可以直接存入,包括JavaScript对象.在对象仓库中, ...

随机推荐

  1. Node.js是用来干嘛的

    如果你去年注意过技术方面的新闻,我敢说你至少看到node.js不下一两次.那么问题来了“node.js是什么?”.有些人没准会告诉你“这是一种通过JavaScript语言开发web服务端的东西”.如果 ...

  2. 动态规划-最长单调递增子序列(dp)

    最长单调递增子序列 解题思想:动态规划 1.解法1(n2) 状态:d[i] = 长度为i+1的递增子序列的长度 状态转移方程:dp[i] = max(dp[j]+1, dp[i]); 分析:最开始把d ...

  3. Win10系列:UWP界面布局基础12

    画刷 画刷(Brush)用于为图形元素填充颜色.在XAML中,画刷有许多属性,其中较常使用的是Fill属性和Stroke属性,Fill用于填充图形的背景色,而Stroke用于设置图形的线条颜色. 在实 ...

  4. [Leetcode 392]判断子序列 Is Subsequence

    [思路] 判断s是否为t的子串,所以length(s)<=length(t).于是两个指针,一次循环. 将s.t转换为数组p1.p2. i为过程中s的匹配长度. i=0空串,单独讨论返回true ...

  5. intelij idea常用设置

    1.genneral设置 2.自动导包 3.设置显示行号和方法分隔符 4.忽略大小写提示代码 比如:输入str会让其提示String 5.去掉单行显示类,让idea多行显示,容易找到类 6.设置字体及 ...

  6. 深入理解java虚拟机---lanmbda表达式简介(三)

    1.lanmbda表达式使用  lanbmda表达式的作用: A: 取代内部类 B;增加对集合的操作,从而增强其性能

  7. tomcat的安装及配置

    1.首先进tomcat官网下载zip压缩文件:http://tomcat.apache.org/download-90.cgi 2.解压缩到指定文件压(后面配置环境变量会用到) 3.配置环境变量 4. ...

  8. IBM MQ 集成CXF 发送JMS 消息

    0.POM依赖 <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w ...

  9. leetcode第26题:删除排序数组的重复项

    给定一个排序数组,你需要在原地删除重复出现的元素,使得每个元素只出现一次,返回移除后数组的新长度. 不要使用额外的数组空间,你必须在原地修改输入数组并在使用 O(1) 额外空间的条件下完成. 给定数组 ...

  10. golang统计出其中英文字母、空格、数字和其它字符的个数

    方法一 通过ASCII码表判断并统计 package main import "fmt" func charactortype() { var s2 string = " ...