前端websocket获取数据后需要存本地吗_web端的数据库，你会用吗？（干货注意收藏）...

前言

做为有着多年前端开发者，深知前端的技术迭代较快日新月异，在平日里主要把精力放在ES6、TypeScript以及Vue和React等前端的流行技术栈上，对web端的数据库这一块了解较少；最近面试一些前端的小伙伴发现，web端的数据库在一些需要离线处理较多数据和其他的场景中，使用起来还是非常的方便的；因此也就开始着手，对web端的数据库学习和应用了，下边来就简单介绍下web端的数据库。

首先我们来谈一下浏览器常见的几种缓存方法：Cookie、Web Storage：

    1. Cookie

        cookie可以做前端存储方案，但是有很多局限性。

• • 存储空间有限4k，

  • 存储有效时间有限制

  • 存在cookie中的数据，在每次请求的时候都会将它带上，使得每次请求的数据都会无意义增大

  • cookie设计之初并不是让前端存数据用的，它是为了让网站验证用户身份用的，存储功能只是一个手段而已

    2. web Storage

• 永久存储localStorage

• 会话期间存储sessionStorage

        优势

• • 存储空间更大，有5M大小

  • 在浏览器发送请求是不会带上web Storage里的数据

  • 更加友好的API

  • 可以做永久存储(localStorage)

        局限

• • 随着web应用程序的不断发展，5M的存储大小对于一些大型的web应用程序来说有些不够

  • web Storage只能存储string类型的数据，对于object类型的数据只能先用JSON.stringify()转换下在存储

   基于以上原因，提出了浏览器数据库存储，web SQL Database (已经被弃用) 和 IndexedDB(索引数据库)，接下来就主要对IndexedDB简单介绍了。

IndexedDB

介绍

IndexedDB是一种使用浏览器存储大量数据的方法，它创造的数据可以被查询，并且可以离线使用。

概念

使用IndexedDB，使用一个key索引，可以存储或者获取数据。是事务(transaction)中完成对数据的修改。遵从同源协议(same-origin policy)。所以只能访问同域中存储的数据，而不能访问其他域的API包含异步(asynchronous)API 和同步(synchronous)API两种。异步API适合大多数情况，同步API必须同WebWorkers一同使用，目前，没有主流浏览器支持同步API。即使同步API被支持了，你也会在大多数情况使用异步API。

IndexedDB是WebSQL数据库的取代品，W3C组织在2010年11月18日废弃了webSql.IndexedDB和WebSQL的不同点在于WebSQL是关系型数据库(复杂)IndexedDB是key-value型数据库(简单好使)。

使用

创建一个IndexedDB数据库

// 创建数据库
// 第一个参数为数据库名称，第二个数据库为版本号，返回一个IDBOpenDBRequest对象用于操作数据库。
// 对于open()的第一个参数数据库名，open()会先去查找本地是否已有这个数据库，如果有则