103、浏览器端存储方式

1、cookie

HTTP cookie，通常直接叫做cookie，是客户端用来存储数据的一种选项，它既可以在客户端设置也可以在服务器端设置。cookie会跟随任意HTTP请求一起发送。

优点：兼容性好

缺点：一是增加了网络流量；二则是它的数据容量有限，最多只能存储4KB的数据，浏览器之间各有不同；三是不安全。

2、userData

userData是微软通过一个自定义行为引入的持久化用户数据的概念。用户数据允许每个文档最多128KB数据，每个域名最多1MB数据。

缺点：userData不是 web 标准的一部分，只有IE支持。

3、web存储机制

web storage，包括两种：sessionStorage 和 localStorage，前者严格用于一个浏览器会话中存储数据，因为数据在浏览器关闭后会立即删除；后者则用于跨会话持久化地存储数据。

缺点：IE不支持 SessionStorage，低版本IE ( IE6, IE7 ) 不支持 LocalStorage，并且不支持查询语言

localStorage的优点：

1）localStorage拓展了cookie的4K限制；

2）localStorage会可以将第一次请求的数据直接存储到本地，这个相当于一个5M大小的针对于前端页面的数据库，相比于cookie可以节约带宽，但是这个却是只有在高版本的浏览器中才支持的；

3）localStorage 方法存储的数据没有时间限制。第二天、第二周或下一年之后，数据依然可用。

localStorage的缺点：

1）浏览器的大小不统一，并且在IE8以上的IE版本才支持localStorage这个属性；

2）目前所有的浏览器中都会把localStorage的值类型限定为string类型，这个在对我们日常比较常见的JSON对象类型需要一些转换；

3）localStorage在浏览器的隐私模式下面是不可读取的；

4）localStorage本质上是对字符串的读取，如果存储内容多的话会消耗内存空间，会导致页面变卡；

5）localStorage不能被爬虫抓取到。

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

4、indexedDB

indexed Database API，简称为indexedDB，是在浏览器中保存结构化数据的一种「数据库」。它类似SQL数据库的结构化数据存储机制，代替了废弃已久的web SQL Database API，它能够在客户端存储大量的结构化数据，并且使用索引高效检索的API。

缺点：兼容性不好，未得到大部分浏览器的支持。

5、Flash cookie

Flash本地存储，类似于HTTP cookie，它是利用 SharedObject类来实现本地存储信息。它默认允许每个站点存储不超过100K的数据，远大于cookie，而且能够跨浏览器。

缺点：浏览器需安装 Flash 控件，毕竟它是通过Flash的类来存储。所幸的是，没有安装Flash的用户极少。

6、Google Gears

Google Gears是Google在07年发布的一个开源浏览器插件，Gears 内置了一个基于SQLite的嵌入式 SQL数据库，并提供了统一API 对 数据库进行访问，在取得用户授权之后，每个站点可以在SQL数据库中存储「不限大小」的数据。

缺点：需要安装 Google Gears 组件

 

强调一下：cookie,localStorage和sessionStorage的异同：

共同点：都是保存在浏览器端，且同源的。

区别：

1）cookie数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递；而sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存；

2）cookie数据有路径（path）的概念，可以限制cookie只属于某个路径下；

3）存储大小限制也不同，cookie数据不能超过4k，同时因为每次http请求都会携带cookie，所以cookie只适合保存很小的数据，如会话标识；sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大；

4）数据有效期不同，sessionStorage：仅在当前浏览器窗口关闭前有效，自然也就不可能持久保持；localStorage：始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据；cookie只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭；

5）作用域不同，sessionStorage不在不同的浏览器窗口中共享，即使是同一个页面；localStorage 在所有同源窗口中都是共享的；cookie也是在所有同源窗口中都是共享的；

6）Web Storage 支持事件通知机制，可以将数据更新的通知发送给监听者；Web Storage 的 api 接口使用更方便。