2018-06-17

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});