浏览器客户端的数据存储

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

一、Cookie

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


过程：

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属性。


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 中少存储信息，以避免影响性能

二、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 事件。这个事件的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/

如果觉得本文不错的话，帮忙点击下面的推荐哦,谢谢！