1.cookie

    HTTP Cookie，通常叫做Cookie，最初是在客户端用于存储会话信息的。

    1.1.cookie的限制

    • IE6以及更低版本：每个域名最多20个cookie
    • IE7之后的版本：每个域名最多50个cookie。IE7最初是支持每个域名最大20个cookie，之后被微软的一个补丁所更新。
    • Firefox：每个域名最多50个cookie
    • Opera：每个域名最多30个cookie
    • Safari和Chrome：没有规定每个域名的cookie限制

    注意：当超过单个域名的最大限制后，如果还要设置cookie，浏览器就会清空以前所设置的cookie。IE和Opera会删除最近最少使用过的，Firefox会随机删除。

    1.2.cookie的构成

    • 名称（name）：一个唯一确定cookie的名称，名称不区分大小写，但最好在实际开发中最好当作是区分大小写的。
    • 值（value）：存储在cookie中的字符串值，值必须被URL编码
    • 域（domain）：cookie对于那个域是有效的，所有向该域下发送的请求中都会包含这个cookie信息。
    • 路径（path）：对于指定域中的那个路径，应该向服务器发送cookie。
    • 失效时间（expires）：表示cookie何时应该被删除的时间戳。默认情况下，浏览器会话结束后即将所有cookie删除；不过也可以自定义设置过期时间。
    • 安全标志（secure）：指定后，cookie只有在使用SSL连接的时候才发送到服务器。
    1. Set-Cookie:name=value; expires=Mon,22-Jan-07 07:10:24 GTM; domain=.aa.com

    该头信息指定了一个叫做name的cookie，它会在2007年1月22日07:10:24失效，同时对于www.aa.com和aa.com的任何子域都有效。

    1.3.编写cookie

    在javascript中添加cookie，要借用document.cookie属性，这个属性有个独特之处在于它会因为使用它的方式不同而表现出不同的形式。

    格式如下：

    1. name=value;expires=expiration_time; path=domain_path; domain=domain_name; secure

    简单示例：

    1. document.cookie = "name=zhang";

    要给被创建的cookie添加额外信息，只要将参数追加到该字符串中就行

    1. document.cookie = encodeURIComponent("name") + "=" + ncodeURIComponent("Nicholas") + "; domain=.aa.com; path=/";

    借用函数简化cookie功能：

    1. var cookieUtil = {
    2.     getCookie:function(name){
    3.           var cookieName = encodeURIComponent(name) + "=",
    4.         cookieStart = document.cookie.indexOf(cookieName),
    5.         cookieValue = null,
    6.           if(cookieStart > -1){
    7.               var cookieEnd = document.cookie.indexOf(";",cookieStart);
    8.               if(cookieEnd == -1){
    9.                   cookieEnd = document.cookie.length;
    10.             }
    11.         cookieValue = decodeURIComponent(document.cookie.substring(cookieStart + cookieName.length, cookieEnd));
    12.           }
    13.         return cookieValue
    14.   },
    15.   setCookie:function(name,value,expires,path,domain,secure){
    16.           var cookieText = encodeURIComponent(name) + "=" + encodeURIComponent(value);
    17.         if(expires instanceOf Date){
    18.               cookieText += "; expires=" + expires.toGMTString();
    19.       }
    20.         if(path) {
    21.               cookieText += "; path=" + path;
    22.       }
    23.         if(domain) {
    24.               cookieText += "; domain=" + domain;
    25.       }
    26.         if(secure) {
    27.               cookieText += "; secure";
    28.       }
    29.         document.cookie = cookieText;
    30.   },
    31.     deleteCookie:function(name,path,domain,secure){
    32.           this.setCookie(name,"",new Date(0),path,domain,secure);
    33.   }
    34. }
    36. //调用示例
    37. cookieUtil.getCookie("name");
    38. cookieUtil.setCookie("id","123");

    2.sessionStorage

    sessionStorage对象存储特定于某个会话的数据，也就是该数据只保持到浏览器关闭。存储在sessionStorage中的数据可以跨越页面刷新而存在，同时如果浏览器支持，浏览器崩溃并重启后依然可用。

    1. //存储数据
    2. sessionStorage.setItem("id',"123"); //使用方法存储数据
    3. //或者
    4. sessionStorage.id = "123";
    6. //IE8异步写入方式
    7. sessionStorage.begin();
    8. sessionStorage.name = "zhang";
    9. sessionStorage.commit();
    11. //读取数据
    12. var id = sessionStorage.getItem("id");
    13. //或者
    14. var id = sessionStorage.id
    16. //删除数据
    17. sessionStorage.removeItem("id");

    3.globalStorage

    globalStorage对象是跨域会话存储。但有特定的访问限制，要使用globalStorage，首先要指定那些域可以访问该数据，可以通过方括号标记使用属性来实现。

    1. //保存数据
    2. globalStorage[location.host].name = "zhang";
    4. //获取数据
    5. var name = globalStorage[location.host].name;
    6. //或者
    7. var name = globalStorage[location.host].getItem("name");
    9. //删除数据
    10. globalStorage[location.host].removeItem("name");

    注意：如果不使用removeItem() 或者delete删除， 或者用户未清除浏览器缓存，存储在globalStorage 属性中的数据会一直保留在磁盘上。这让 globalStorage 非常适合在客户端存储文档或者长期保存用户偏好设置。

    3.1限制：

    大多数桌面浏览器对大小没有限制。但 Chrome、 Safari、 iOS 版 Safari 和 Android 版 WebKit 都有限制，也都是 2.5MB。 IE8+和 Opera 对sessionStorage 的限制是 5MB。

    4.localStorage

    localStorage对象在修订过的HTML5规范中作为持久保存客服端数据的方案取代了globalStorage。与globalStorage不同的是，不能给localStorage指定任何访问规则，规定事先就设定好了。
    要访问一个localStorage对象，页面必须来自同一个域名（子域名无效），使用同一种协议，在同一个端口上。

    1. //存储数据
    2. localStorage.setItem("id","123");
    3. //或者
    4. localStorage.id = "123";
    6. //获取数据
    7. var id = localStorage.getItem("id");
    8. var id = localStorage.id

    4.1限制：

    大多数桌面浏览器大小限制为5MB，Chrom和Safari为2.5MB，而 iOS 版 Safari 和 Android 版 WebKit 的限制也是 2.5MB