试比较浏览器存储的方法大家好，我是小杜杜，我是小杜杜，我们通常会有浏览器缓存来解决很多问题，在面试中也会问到相关的知识，

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第18天，点击查看活动详情

大家好，我是小杜杜，我是小杜杜，我们通常会有浏览器缓存来解决很多问题，在面试中也会问到相关的知识，在浏览器的缓存中一共有五种方式，分别是cookie、localStorage、sessionStorage、indexDB、Web SQL五种方式。

相信大家对前三种一定熟悉的不得了，但对 indexDB和Web SQL并不了解，当然这篇文章会详细讲讲这五种存储，如果你不了解相关特性，这篇文章一定能够帮助你～

Cookie

定义

cookie：是指存储在用户本地终端上的数据，同时它是与具体的web页面或者站点相关的。

cookie数据会自动在web浏览器和web服务器之间传输，也就是说HTTP请求发送时，会把保存在该请求域名下的所有cookie值发送给web服务器，因此服务器端脚本是可以读、写存储在客户端的cookie的操作。

有效期

cookie默认情况下的有效期是很短暂的，一旦用户关闭浏览器，cookie保存的数据就会丢失。
如果想要延长cookie的有效期，可以通过设置HTTP头信息中的cache-control属性的max-age值，或者修改HTTP头信息中的expires属性的值来延长有效期。

作用域

cookie是通过文档源和**文档路径*来确定的。
该作用域通过cookie的path和domain属性也是可配置的。
在默认情况下，cookie和创建它的web页面有关，并对该页面以及和该页面同目录或者子目录的其他页面可见。

有时候，你可能希望让整个网站都能够使用cookie的值，而不管是哪个页面创建它。要满足这样的需求可以设置cookie的路径(设置cookie的path属性)。cookie的作用域默认由文档源限制。但是，有的大型网站想要子域之间能够互相共享cookie。

限制

每个web服务器(域名)保存的cookie数不能超过50个
每个cookie保存的数据不能超过4KB，如果超过了4KB（IE6大约只能存储2K），服务器会处理不了。

优缺点

优点：

能用于和服务器端通
cookie快要过期时，可以重新设置而不是删除。

缺点：

它会随着http头信息一起发送，增加了网络流量（文档传输的负载）
它只能储存少量的数据；它只能储存字符串
有潜在的安全问题。

注：cookie已经不适合存储数据，但可以用作单点登录一些的功能

LocalStorage 和 SessionStorage

LocalStorage:

在HTML5中，新加入了一个localStorage特性，这个特性主要是用来作为本地存储来使用的

解决了cookie存储空间不足的问题(cookie中每条cookie的存储空间为4k)，localStorage中一般浏览器支持的是5M大小，在不同的浏览器中localStorage会有所不同。

优缺点：

优点：

localStorage拓展了cookie的4K限制,并且达到了5M的大小；
localStorage会可以将第一次请求的数据直接存储到本地，这个相当于一个5M大小的针对于前端页面的数据库，相比于cookie可以节约带宽，但是这个却是只有在高版本的浏览器中才支持的；
localStorage方法存储的数据没有时间限制。第二天、第二周或下一年之后，数据依然可用。

缺点：

浏览器的大小不统一，并且在IE8以上的IE版本才支持localStorage这个属性；
目前所有的浏览器中都会把localStorage的值类型限定为string类型，这个在对我们日常比较常见的JSON对象类型需要一些转换；
localStorage在浏览器的隐私模式下面是不可读取的；
localStorage本质上是对字符串的读取，如果存储内容多的话会消耗内存空间，会导致页面变卡；
localStorage不能被爬虫抓取到。

SessionStorage：sessionStorage与localStorage的唯一一点区别就是localStorage属于永久性存储，而sessionStorage属于当会话结束的时候， sessionStorage中的键值对就会被清空。

共同点

localStorage和sessionStorage都继承于Storage，提供了统一的api来访问和设置数据。

setItem: 接受两个参数，key和value，如果不存在则添加，存在则更新
getItem: 接受一个参数key，获取对应key的本地存储
removeItem 接受一个参数key，删除对应本地存储的key
clear: 清空存储中的所有本地存储数据
key: 接受一个整数索引，返回对应本地存储中索引的键

indexDB

IndexedDB : 是浏览器提供的本地数据库，它可以被网页脚本创建和操作。IndexedDB 允许储存大量数据，提供查找接口，还能建立索引。这些都是 LocalStorage 和SessionStorage 所不具备的。

以数据库类型，IndexedDB 不属于关系型数据库（不支持 SQL 查询语句），更接近 NoSQL 数据库。

特点。

键值对储存。：IndexedDB 内部采用对象仓库（object store）存放数据。并且所有类型的数据都可以直接存入，包括 JavaScript 对象。

在对象仓库中，数据以键值对的形式保存，每一个数据记录都有对应的主键，主键是独一无二的，不能有重复，否则会抛出一个错误。

异步：IndexedDB 操作时不会锁死浏览器，用户依然可以进行其他操作，这与 LocalStorage 形成对比，后者的操作是同步的。这样做的目的是为了防止大量数据的读写，拖慢网页的表现。
支持事务：也就是说如果有一系列操作步骤之中，只要有一步失败，整个事务就都取消，数据库回滚到事务发生之前的状态，不存在只改写一部分数据的情况。
同源限制： IndexedDB 受到同源限制，每一个数据库对应创建它的域名。网页只能访问自身域名下的数据库，而不能访问跨域的数据库。
储存空间大： IndexedDB 的储存空间比 LocalStorage 大得多，一般来说不少于 250MB，甚至没有上限。
支持二进制储存：IndexedDB 不仅可以储存字符串，还可以储存二进制数据（ArrayBuffer 对象和 Blob 对象）。

如何学习

IndexedDB 是一个比较复杂的 API，涉及不少概念。它把不同的实体，抽象成一个个对象接口。学习这个 API，就是学习它的各种对象接口。

数据库：IDBDatabase 对象
对象仓库：IDBObjectStore 对象
索引： IDBIndex 对象
事务： IDBTransaction 对象
操作请求：IDBRequest 对象
指针： IDBCursor 对象
主键集合：IDBKeyRange 对象

Web SQL 数据库

Web SQL数据库：实际上不是HTML5规范的一部分，但它是一个单独的规范，它引入了一组API来使用SQL操作客户端数据库

核心方法

openDatabase：这个方法使用现有的数据库或者新建的数据库创建一个数据库对象。
transaction：这个方法让我们能够控制一个事务，以及基于这种情况执行提交或者回滚。
executeSql：这个方法用于执行实际的 SQL 查询。

但要注意一点， Web SQL已经被废弃了，所以大家只要知道有这个存储就行了，至于使用，已经没有必要浪费精力学习了

End

有关浏览器存储的知识就已经讲完了，希望能够帮助到你～喜欢的点个赞👍🏻支持下吧(●￣(ｴ)￣●)

试比较浏览器存储的方法