Client storage
cookie
Wiki: Cookie (plural form cookies), which refers to some data (usually encrypted) stored on the user's local terminal (Client Side) to identify the user's identity.
cookie的原理与实现
服务器在http响应头中添加Set-Cookie信息，浏览器收到响应后会根据头中的字段保存cookie，下一次访问时在请求头中附带cookie内容，供服务器根据cookie值进行后续处理。
```
eswedwae
```
**sessionID**
response header
HTTP/1.1 200 OK
Content-type: text/html
Set-cookie: name=value
Other-header: other-header-value
request header
GET /index.html HTTP/1.1
Cookie: name=value
Other-header: other-header-value
```
**cookie的构成与限制**
- 名称-值 name-value：名称不区分大小写；值为字符串，两者都必须被URL编码。
，
var CookieUtil = {
get: function (name){
var cookieName = encodeURIComponent(name) + "=",
cookieStart = document.cookie.indexOf(cookieName),
cookieValue = null,
cookieEnd;
if (cookieStart > -1){
cookieEnd = document.cookie.indexOf(";", cookieStart);
if (cookieEnd == -1){
cookieEnd = document.cookie.length;
}
cookieValue = decodeURIComponent(document.cookie.substring(
cookieStart + cookieName.length, cookieEnd));
}
return cookieValue;
},
set: function (name, value, expires, path, domain, secure) {
var cookieText = encodeURIComponent(name) + "=" + encodeURIComponent(value);
if (expires instanceof Date) {
cookieText += "; expires=" + expires.toGMTString();
}
if (path) {
cookieText += "; path=" + path;
}
if (domain) {
cookieText += "; domain=" + domain;
}
if (secure) {
cookieText += "; secure";
}
document.cookie = cookieText;
},
unset: function (name, path, domain, secure){
this.set(name, "", new Date(0), path, domain, secure);
}
}
- 域 domain：cookie对哪个域有效，浏览器向该域发送的请求中都会包含这个cookie。若域x
=www.A.com，那么只有访问x时才会发送该cookie；若x = .A.com，则访问x的子域如bb.A.com也会发送。
**同源策略**
``
HTTP/1.1 200 OK
Content-type: text/html
Set-cookie: name=value；expires=Mon, 22-jan-07 07:10:22 GMT; domain=.wrox.com
Other-header: other-header-value
``
- 失效时间 expires：表示cookie何时应该被删除的时间戳，也就是何时停止向服务器发送该cookie。若设置为以前的时间，则立即删除
- 路径 path：对于访问指定域中的路径，才向服务器发送该cookie
，
HTTP/1.1 200 OK
Content-type: text/html
Set-cookie: name=value；path=/; secure
Other-header: other-header-value
- 安全标志 secure： true表示仅https才发送该cookie
- httpOnly： true表示该cookie不能被浏览器访问，只能被服务器访问
> Cookie容量限制
一、浏览器允许每个域名所包含的cookie数：
Microsoft指出InternetExplorer8增加cookie限制为每个域名50个，但IE7似乎也允许每个域名50个cookie。
Firefox每个域名cookie限制为50个。
Opera每个域名cookie限制为30个。
Safari/WebKit貌似没有cookie限制。但是如果cookie很多，则会使header大小超过服务器的处理的限制，会导致错误发生。
二、当很多的cookie被设置，浏览器如何去响应。
除Safari（可以设置全部cookie，不管数量多少），有两个方法：
最少最近使用（leastrecentlyused(LRU)）的方法：当Cookie已达到限额，自动踢除最老的Cookie，以使给最新的Cookie一些空间。InternetExplorer和Opera使用此方法。
Firefox很独特：虽然最后的设置的Cookie始终保留，但似乎随机决定哪些cookie被保留。似乎没有任何计划（建议：在Firefox中不要超过Cookie限制）。
三、不同浏览器间cookie总大小也不同：
Firefox和Safari允许cookie多达4097个字节，包括名（name）、值（value）和等号。
Opera允许cookie多达4096个字节，包括：名（name）、值（value）和等号。
InternetExplorer允许cookie多达4095个字节，包括：名（name）、值（value）和等号。
**localStorage, SessionStorage**
----------
与 cookie 不同，存储限制要大得多（至少5MB），并且信息不会被传输到服务器。
HTML 本地存储提供了**两个**在客户端存储数据的对象：
**window.localStorage** - 存储没有截止日期的数据
**window.sessionStorage** - 针对一个 session 来存储数据（当关闭浏览器标签页时数据会丢失）
**IndexedDB**
----------
> IndexedDB是在浏览器中保存结构化数据的一种数据库，IndexedDB的思想是创建一套API，方便保存和读取JavaScript对象，同时支持查询和搜索。IndexedDB的最大特色是使用对象保存数据。一个IndexedDB数据库，就是一组位于相同命名空间下的对象的集合。
- IndexedDB打开数据库
IndexedDB是一个作为API宿主的全局对象,由于IndexedDB设计的操作为异步进行，所以大多数的操作为请求操作，打开数据库即向数据库发送open请求,如下代码所示，发送请求后，如果数据库存在，就打开该数据库，如果数据库不存在，就创建并打开该数据库，打开该数据库成功后会返回一个IDBOpenDBRequest对象，这个对象上可以添加一系列的处理程序，如代码中的onerror事件和onsuccess事件,在onsuccess中可以得到IDBDatabase对象。
var indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB;
var request,database;
request = indexedDB.open('test');
request.onerror = function(e){
console.log(e.target.errorCode);
};
request.onsuccess = function(e){
database = e.target.result;
console.log('创建或打开数据库成功') ;
}
**IndexedDB对象存储空间**
在建立或者打开数据库后，我们一般的操作是建立表，向表中插入数据，在IndexedDB中，用对象存储空间ObjectStore来代替表的概念，存储空间中的对象就相当于表中插入的数据。在上一步打开数据库的onsuccess中我们可以获得到IDBDatabase对象，创建存储空间就是在通过该对象调用createObjectStore函数。
var indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB;
var request,database;
request = indexedDB.open('test');
request.onerror = function(e){
console.log(e.target.errorCode);
};
request.onsuccess = function(e){
database = e.target.result;
console.log('创建或打开数据库成功') ;
}
- 索引
在建立存储空间时，如果我们想为存储空间指定多个键要怎么办呢？IndexedDB提供了创建索引的方式，下面我们看一下如何创建索引以及索引的作用。
要创建索引，首先要引用对象存储空间，然后调用createIndex()方法，如下示例：
var store = db.transaction("users").objectStore("users")，
index = store.createIndex("age","age",{unique:false});