浏览器存储

以下介绍cookie、localStorage、sessionStorage、indexedDB。
一、Cookie
more discussion
1.来源
HTTP协议是无状态的，自身不对请求和响应之间的通信状态进行保存（一个服务器是不清楚是不是同一个浏览器在访问它）。服务器可以设置或读取Cookies中包含信息，借此维护浏览器与服务器的会话状态。

image.png

图中服务器对客户端的响应中，携带cookie，准确而言，是在HttpResponse的header中。
2.定义
Cookie指某些网站为了辨别用户身份而储存在用户本地终端上的数据(通常经过加密)。 cookie是服务端生成，客户端进行维护和存储。通过cookie,服务器可以知道请求是来自哪个客户端，就可以进行客户端状态的维护，根据cookie值的内容就可以判断和恢复一些用户的信息状态。（有些网站会询问用户是否保存登录密码，如果是那么下次（一般有时间限制）就可以自动登录，这就涉及cookie）。
2-2. 构成
（1）Name:一个唯一确定 cookie 的名称，必须被URL编码。
（2）Value：存储在cookie中的字符串，值必须被URL编码。
（3）Domain(域)：指定cookie对哪个域有效，那么所有向该域发送的请求中都会包含这个 cookie 信息。上级域对应的 cookie 对其子域都有效（例如 某个域(domain)为 baidu.com 的 cookie，对于 baidu.com 的所有子域（如 baike.baidu.com）都有效 ）。
（4）Path（路径）：只对指定的路径发送cookie信息，例如域名为www.baidu.com的某个cookie，路径为 /books/，那么请求 http://www.baidu.com/ 对应的页面，就不会发送该cookie，即使请求的页面来自同一个域。
（5）Expires / Max-Age:表示cookie何时应该被删除（即停止向服务器发送这个cookie）。默认情况下，浏览器会话结束时就将所有cookie删除。在指定了删除时间后且当前未到期，cookie在浏览器关闭后依然保存在用户本地。
（6）Secure:安全标志。
注意：域、路径、失效时间、安全标志都是服务器给浏览器的关于一条cookie 的指示，浏览器从而确定在给服务器发送请求时，是否发送该cookie。域、路径、失效时间等这些指示信息并不会发送到服务器，只有name/value名值对才会被发送。

3.特点
（1）可用于客户端和服务器之间的交互，cookie的数据会自动的传递到服务器，服务器也可以写cookie(通过set-Cookie)到客户端。
（2）客户端自身数据的存储，需要设置过期时间expire。设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭。若不设置过期时间，则表示这个cookie的生命期为浏览器会话期间，关闭浏览器窗口，cookie就消失。
（3）同一个主域名下的二级域名也是不可以交换使用cookie的，比如www.baidu.com和image.baidu.com不能公用cookie的。

chrome中查看cookie

4.生成方式
(1) http response header中的set-cookie
(2) js中可以通过document.cookie读写cookie

document.cookie="gender=male";

5.缺点
（1）cookie会被附加在每个HTTP请求中，在HttpRequest 和HttpResponse的header中都会被传输，因而增加流量损失。
（cookie是用来维护用户信息的，而域名(domain)下所有请求都会携带cookie，但对于静态文件的请求，携带cookie信息根本没有用，此时可以通过cdn（存储静态文件的）的域名和主站的域名分开来解决。）

（2）由于在HTTP请求中的Cookie是明文传递的，所以存在安全性问题，除非用HTTPS。
（可以使用HttpOnly提升Cookie安全性。httponly 不支持读写，浏览器不允许脚本操作document.cookie去更改cookie，一般情况下都应该设置这个为true，这样可以避免被XSS攻击拿到cookie。）

（3）Cookie的大小限制在4KB左右，对于复杂的存储需求来说是不够用的。很多浏览器都限制一个站点的cookie个数也是有限制的。
（注意：各浏览器的cookie每一个name=value的value值大概在4k，所以4k并不是一个域名下所有的cookie共享的,而是一个name的大小。）

6.总结
Cookie目前主要作为客户端与服务器交互的载体，保持客户端的某些状态。存储数据功能则主要交给 webStorage(分为sessionStorage 和 localStorage)以及indexedDB。

二、localStorage
详细介绍

localStorage maintains a separate storage area for each given origin, and persists even when the browser is closed and reopened.
1.特点
（1）保存的数据长期存在，下一次访问该网站的时候，可以直接读取以前保存的数据。（直到通过JS删除或者用户清除浏览器缓存）
（2）大小为5M左右。
（3）仅在客户端使用，不和服务端进行通信
（4）接口封装较好
由于以上特点，LocalStorage可以作为浏览器本地缓存方案，用来提升网页首屏渲染速度(根据第一次请求返回结果，将一些不变信息直接存储在本地)。

2.存入/读取数据
localStorage保存的数据，以“键值对”的形式存在。也就是说，每一项数据都有一个键名和对应的值。所有的数据都是以文本格式保存。
存入数据使用setItem方法。

localStorage.setItem("key","value");

读取数据使用getItem方法。

var valueLocal = localStorage.getItem("key");

chrome查看localStorage

3.实例
这里借用MDN网站上的例子，在一个页面中可以设置背景色、字体、图片，设置完毕，关闭页面，下次打开的时候，上次的设置依然存在。这背后就用到了 localStorage，

MDN例子

同一个域名（domain）下的不同页面( page )可以访问同一个localStorage，正因如此，若在页面A中对 localStorage 对象进行了改动，相同域名下的页面B可通过以下代码设置针对 storage 对象变化的监听来同步这些改动。（但改动sessionStorage对象并不会触发 StorageEvent 事件，因为 localStorage 和 sessionStorage 对应的 Strorage 对象是不同且互相独立的）。

window.addEventListener('storage', function(e) {  
  document.querySelector('.my-key').textContent = e.key;
  document.querySelector('.my-old').textContent = e.oldValue;
  document.querySelector('.my-new').textContent = e.newValue;
  document.querySelector('.my-url').textContent = e.url;
  document.querySelector('.my-storage').textContent = JSON.stringify(e.storageArea);
});

同域名下页面B同步页面A中对 localStorage 对象 的改动.png

注意：

Pages on other domains can't access the same storage objects.
要访问同一个localStorage对象，页面必须来自同一个域名（子域名无效），使用同一种协议，在同一个端口上。

三、SessionStorage
sessionStorage保存的数据用于浏览器的一次会话(session)，当会话结束（通常是该窗口关闭），sessionStorage就被清空（sessionStorage maintains a separate storage area for each given origin that's available for the duration of the page session (as long as the browser is open, including page reloads and restores).）；
sessionStorage不在不同的浏览器窗口中共享，即使是同一个页面；localStorage 在所有同源窗口中都是共享的；cookie也是在所有同源窗口中都是共享的；
除了保存期限的长短不同，SessionStorage的属性和方法与LocalStorage完全一样。

A different Storage object is used for the sessionStorage and localStorage for each origin — they function and are controlled separately.

特点：
会话级别的浏览器存储；
大小为5M左右；
仅在客户端使用，不和服务端进行通信；
接口封装较好；
基于上面的特点，SessionStorage 可以有效对表单信息进行维护，比如刷新时，表单信息不丢失。

四、IndexedDB
WebStorage使用简单字符串键值对在本地存储数据，方便灵活，但不适于大量结构化数据存储，IndexedDB是为了能够在客户端存储大量的结构化数据(由于不会加密数据，所以不要存储敏感数据)，并且使用索引高效检索的API。
IndexedDB是一种类似于SQL数据库的结构化数据存储机制，但其数据不是保存在表中，而是保存在对象存储空间中。
特点:
(1)IndexedDB是一种低级API，用于客户端存储大量结构化数据。该API使用索引来实现对该数据的高性能搜索。
(2)为应用创建离线版本。
限制：
（1）IndexedDB数据库只能由同源（相同协议、域名、端口）页面操作，不能跨域共享信息；
（2）每个源（origin）对应的IndexedDB占用的磁盘空间有限制，在不同的浏览器上不同，一般大于webStorage.

基本操作：在IndexedDB大部分操作并不是常用的调用方法，返回结果的模式，而是请求——响应的模式。
（1）建立打开indexdb---window.indexedDB.open("testDB")
得到的是一个IDBOpenDBRequest对象，而希望得到的DB对象在其result属性中.
（2）关闭indexdb----indexdb.close()；
（3）删除indexdb----window.indexedDB.deleteDatabase(indexdb)。

reference:
1
2