浏览器客户端的数据存储

属于某个特定用户的信息应该存在该用户的机器上,无论是登录信息、偏好设定或其他数据,这是一个很重要的用户体验，它避免了用户重复多次的简单操作。

一、Cookie

cookie 是原来的网景公司创造的。一份题为“Persistent Client State: HTTP Cookes”（持久客户端状态： HTTP Cookies ）的标准中对cookie 机制进行了阐述。

cookie标准要求服务器对任意HTTP 请求发送Set-Cookie HTTP 头作为响应的一部分，其中包含会话信息

过程：
1.设置cookie，发送至服务器端；
2.服务器对该请求发送带有Set-Cookie 的HTTP响应给浏览器；
3.浏览器会存储这样的会话信息，并在这之后，通过为每个请求添加Cookie HTTP 头将信息发送回服务器

cookie的限制

域限制：浏览器会存储这样的会话信息，并在这之后，通过为每个请求添加Cookie HTTP 头将信息发送回服务器
大小限制：大多数浏览器都有大约4096B（加减1）的长度限制。为了最佳的浏览器兼容性，最好将整个cookie 长度限制在4095B（含4095）以内
个数限制：每个域的cookie 总数是有限的，不过浏览器之间各有不同：

浏览器	个数
IE7+	50
Firefox	50
Opera	30
Safari 和Chrome	没有硬性规定

cookie的构成
比如：

Set-Cookie: name=value; expires=Mon, 22-Jan-07 07:10:24 GMT; domain=.wrox.com;secure

name = value [必须参数]; 名值对，不区分大小写，必须是URL 编码
domain 设定cookie的有效域，所有向该域发送的请求中都会包含这个cookie 信息
path 指定cookie在有效域中的有效路径，即使请求都是来自同一个域的，不是该键制定的路径，也不会发送cookie
expires 表示cookie 何时应该被删除的时间戳（这个值是个GMT 格式的日期），默认情况下，浏览器会话结束时即将所有cookie 删除
secure 指定后，cookie 只有在使用SSL 连接的时候才发送到服务器

js处理cookie
document.cookie 返回当前页面可用的所有cookie的字符串，一系列由分号隔开的名值对儿。
cookie的操作无非是获取、设置和删除，我们把这三种方法封装在一个var CookieUtil = {}对象中。分别对应其get，set，unset属性。

cookie的name和value都是经过URL 编码的，所以必须使用encodeURIComponent，decodeURIComponent()来编解码。

1.get

    get: function (name){
        var cookieName = encodeURIComponent(name) + "=",
        cookieStart = document.cookie.indexOf(cookieName),
        cookieValue = null;
        if (cookieStart > -1){
            var cookieEnd = document.cookie.indexOf(";", cookieStart);
            if (cookieEnd == -1){
                cookieEnd = document.cookie.length;
            }
            cookieValue = decodeURIComponent(document.cookie.substring(cookieStart + cookieName.length, cookieEnd));
        }
        return cookieValue;
    }

2.set

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

3.unset

    unset: function (name, path, domain, secure){
        this.set(name, "", new Date(0), path, domain, secure);
    }

子cookie

子cookie可以绕开浏览器的单域名下的cookie 数限制。子cookie 是存放在单个cookie 中的更小段的数据。也就是使用cookie 值来存储多个名称值对，如：name=name1=value1&name2=value2&name3=value3&name4=value4&name5=value5

所有的cookie 都会由浏览器作为请求头发送，所以在cookie 中存储大量信息会影响到特定域的请求性能。cookie 信息越大，完成对服务器请求的时间也就越长。尽管浏览器对cookie 进行了大小限制，不过最好还是尽可能在cookie 中少存储信息，以避免影响性能

二、IE用户数据

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

使用：

使用CSS 在某个元素上指定userData 行为：

<div style="behavior:url(#default#userData)" id="dataStore"></div>

使用setAttribute()方法在上面保存数据

dataStore.setAttribute("name", "Nicholas");

调用save()方法保存数据，参数为数据空间名字，数据空间名字可以完全任意，仅用于区分不同的数据集

dataStore.save("BookInfo");

使用load()方法来获取数据，参数为数据空间名字

dataStore.load("BookInfo");

使用removeAttribute()删除数据，并使用save()保存修改

dataStore.removeAttribute("name");
dataStore.save("BookInfo");

限制

同cookie，需要同域名，同路径，并使用与进行存储的脚本同样的协议；
无法将用户数据访问限制扩展到更多的客户

用户数据默认是可以跨越会话持久存在的，不会过期；数据需要通过removeAttribute()方法专门进行删除以释放空间。

三、web存储机制——Web Storage

Web Storage 的目的是克服由cookie 带来的一些限制，提供一种存储大量可以跨会话的在cookie 之外的存储会话数据的途径。

Storage对象（以windows 对象属性的形式存在）

sessionStorage对象
存储特定于某个会话的数据，该数据只保持到浏览器关闭
globalStorage对象
这个对象可以跨越会话存储数据，但有特定的访问限制。要使用globalStorage，首先要指定哪些域可以访问该数据。可以通过方括号标记使用属性来实现。如果不使用removeItem() 或者delete 删除该对象，或者用户未清除浏览器缓存，存储在globalStorage 属性中的数据会一直保留在磁盘上。这让globalStorage 非常适合在客户端存储文档或者长期保存用户偏好设置。
localStorage对象
该对象在修订过的HTML 5 规范中作为持久保存客户端数据的方案取代了globalStorage。与globalStorage 不同，不能给localStorage 指定任何访问规则；规则事先就设定好了。要访问同一个localStorage 对象，页面必须来自同一个域名（子域名无效），使用同一种协议，在同一个端口上。这相当于globalStorage[location.host]。
同globalStorage对象一样，localStorage对象数据保留到通过JavaScript 删除或者是用户清除浏览器缓存。

浏览器支持：
IE8+、Firefox 3.5+、Chrome 4+和Opera 10.5+

Storage对象方法：

clear()：删除所有值；Firefox 中没有实现。
getItem(name)：根据指定的名字name 获取对应的值。
key(index)：获得index 位置处的值的名字。
removeItem(name)：删除由name 指定的名值对儿。
setItem(name, value)：为指定的name 设置一个对应的值。

Storage 类型只能存储字符串。非字符串的数据在存储之前会被转换成字符串。

Storage对象事件
对Storage 对象进行任何修改，都会在文档上触发storage 事件。这个事件的event 对象有以下属性：

domain：发生变化的存储空间的域名。
key：设置或者删除的键名。
newValue：如果是设置值，则是新值；如果是删除键，则是null。
oldValue：键被更改之前的值。

数据操作
存储数据：

    //使用属性存储数据
    sessionStorage/globalStorage["www.wrox.com"]/localStorage.name = "brand";
    //使用方法存储数据
    sessionStorage/globalStorage["www.wrox.com"]/localStorage.setItem("name","brand");

读取数据：

    //使用属性存储数据
    var name = sessionStorage/globalStorage["www.wrox.com"]/localStorage.name;
    //使用方法存储数据
    var name = sessionStorage/globalStorage["www.wrox.com"]/localStorage.getItem(("name","brand");

删除数据：

    sessionStorage/globalStorage["www.wrox.com"]/localStorage.removeItem("name")

限制
每个来源都有固定大小的空间用于保存自己的数据，一般限制在2.5M—5M左右。
参考书籍：《javascript高级程序设计》

我的博客:http://bigdots.github.io、http://www.cnblogs.com/yzg1/
如果觉得本文不错的话，帮忙点击下面的推荐哦,谢谢！

posted @ 2016-03-24 15:34 Bigdots 阅读(883) 评论(0) 编辑收藏举报

Big_Dots

浏览器客户端的数据存储

一、Cookie

二、IE用户数据

三、web存储机制——Web Storage

公告