浏览器数据存储 Local Storage, Session Storage, IndexedDB ,WebSQL, Cookies

浏览器存储方式这么多，可我以前却独宠Local Storage一人，但是了解到IndexedDB的时候，我觉得我要变心了，我果然不是一个专一的人？？？？（？）参考其它资料对几种数据存储的分析，我自己给自己做个总结。

浏览器的存储方式有这些：

首先结合网上资料对几种存储方式做个分析。

Local Storage

localStorage（本地存储）是HTML5的的WebStorage提供了两种API中的一种，另外一种是sessionStorage（会话存储）。

localStorage将数据保存在客户端本地的硬件设备(通常指硬盘，也可以是其他硬件设备)中，localStorage的存储周期是永久的，除非localStorage主动删除数据，否则数据永远不会消失。但是值得注意的一点是从iOS 5.1之后，移动端的Safari将localStorage数据存储在cache文件中，在操作系统的要求下，会偶尔进行清除，特别是空间不足时。

localStorage的大小在2.5MB到10MB之间（各家浏览器不同，一般是5MB左右）。

localStorage和sessionStorage保存在客户端，不与服务器进行交互通信。

localStorage和sessionStorage只能存储字符串类型，对于复杂的对象可以使用ECMAScript提供的JSON对象的stringify和parse来处理，localStorage的读写是同步的。

localStoragese：常用于长期登录（+判断用户是否已登录），适合长期保存在本地的数据

Session Storage

sessionStorage（会话存储）,sessionStorage将数据保存在session对象中所以 sessionStorage的生命周期是在仅在当前会话下有效。sessionStorage引入了一个“浏览器窗口”的概念，sessionStorage是在同源的窗口中始终存在的数据。只要这个浏览器窗口没有关闭，即使刷新页面或者进入同源另一个页面，数据依然存在。但是sessionStorage在关闭了浏览器窗口后就会被销毁。同时独立的打开同一个窗口同一个页面，sessionStorage也是不一样的。

sessionStorage和localStorage的存储大小和存储类型相似。

sessionStorage：用于敏感账号一次性登录。

部分浏览器 localStorage 和 sessionStorage的存储大小

IndexedDB

通俗地说，IndexedDB就是浏览器提供的本地数据库，它可以被网页脚本创建和操作。IndexedDB允许储存大量数据，提供查找接口，还能建立索引。这些都是 LocalStorage所不具备的。就数据库类型而言，IndexedDB不属于关系型数据库（不支持SQL查询语句），更接近 NoSQL 数据库。

IndexedDB是一种低级但是却复杂的API，用于客户端存储大量结构化数据(包括, 文件/ blobs)，他在Web Workers中可用。而通过使用Web Workers，Web应用程序可以在独立于主线程的后台线程中，运行一个脚本操作。这样做的好处是可以在独立线程中执行费时的处理任务，从而允许主线程（通常是UI线程）不会因此被阻塞/放慢。也就是说IndexedDB的操作是异步的，能防止大量数据的读写，拖慢网页。

indexedDB的特点：

（1）键值对储存:IndexedDB 内部采用对象仓库（object store）存放数据。所有类型的数据都可以直接存入，包括 JavaScript 对象。对象仓库中，数据以"键值对"的形式保存，每一个数据记录都有对应的主键，主键是独一无二的，不能有重复，否则会抛出一个错误。

（2）异步:IndexedDB 操作时不会锁死浏览器，用户依然可以进行其他操作，这与 LocalStorage 形成对比，后者的操作是同步的。异步设计是为了防止大量数据的读写，拖慢网页的表现。

（3）支持事务:IndexedDB 支持事务（transaction），这意味着一系列操作步骤之中，只要有一步失败，整个事务就都取消，数据库回滚到事务发生之前的状态，不存在只改写一部分数据的情况。

（4）同源限制:IndexedDB 受到同源限制，每一个数据库对应创建它的域名。网页只能访问自身域名下的数据库，而不能访问跨域的数据库。

（5）储存空间大:IndexedDB 的储存空间比 LocalStorage 大得多，一般来说不少于 250MB，甚至没有上限。

（6）支持二进制储存:IndexedDB 不仅可以储存字符串，还可以储存二进制数据（ArrayBuffer 对象和 Blob 对象）。

点击查看indexedDB详细介绍

对我来说要用类似SQL语言去操作IndexedDB会不习惯。（菜鸡对数据库的操作还停留在大学的数据库原理课上.....）,我想说的是IndexedDB的几大类库如；localForage,dexie.js和ZangoDB。其中localForage是我的最爱，他提供像操作localStorage的API去操作indexedDB。

点击查看localForage详细介绍

Web SQL

Web SQL 数据库 API 并不是 HTML5 规范的一部分，它是一个独立的规范，引入了一组使用 SQL 操作客户端数据库的 APIs。如果你是一个 Web 后端程序员，应该很容易理解 SQL 的操作（可惜我是前端菜鸡）。

Web SQL 数据库可以在最新版的 Safari, Chrome 和 Opera 浏览器中工作,在firefox和ie中不支持，Web SQL在移动端比较适用，特别是对于Hybrid应用，所以使用的时候要注意。

Web SQL三个核心方法：

openDatabase：这个方法使用现有的数据库或者新建的数据库创建一个数据库对象。

transaction：这个方法让我们能够控制一个事务，以及基于这种情况执行提交或者回滚。

executeSql：这个方法用于执行实际的 SQL 查询。

点击查看Web SQL基本介绍

点击查看Web SQL使用案例

Cookies

Cookie，有时也用其复数形式 Cookies。类型为“小型文本文件”，是某些网站为了辨别用户身份，进行Session跟踪而储存在用户本地终端上的数据（通常经过加密），由用户客户端计算机暂时或永久保存的信息,如果不在浏览器中设置过期时间，cookie被保存在内存中，生命周期随浏览器的关闭而结束，这种cookie简称会话cookie。如果在浏览器中设置了cookie的过期时间，cookie被保存在硬盘中，关闭浏览器后，cookie数据仍然存在，直到过期时间结束才消失。cookie是服务器发给客户端的特殊信息，cookie是以文本的方式保存在客户端，每次请求时都带上它

cookie只能保存字符串类型，以文本的方式;单个cookie保存的数据不能超过4kb；

针对cookie所存在的攻击：Cookie欺骗，Cookie截获

cookie可用于：判断用户是否登陆过网站，以便下次登录时能够实现自动登录（或者记住密码）。如果我们删除cookie，则每次登录必须从新填写登录的相关信息；保存上次登录的时间等信息；保存上次查看的页面；浏览计数。

 

cookie大小受限,用户可以操作（禁用）cookie，使功能受限,安全性较低,有些状态不可能保存在客户端,每次访问都要传送cookie给服务器，浪费带宽,cookie数据有路径（path）的概念，可以限制cookie只属于某个路径下。

参考其它资料写个体会，没有深挖。每一个存储模式都能聊一大篇，说的不对请多多指教。

 

参考文章：

https://www.cnblogs.com/pengc/p/8714475.html

 http://www.ruanyifeng.com/blog/2018/07/indexeddb.html

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