DOM编程艺术（数据存储）

一、cookie

浏览器中的cookie是一个小型文本文件。cookie是存储在浏览器端的，但是大部分时候我们是在服务器端对cookie进行设置。我们可以在http返回体中通过设置set-cookie这个头部来告诉浏览器这个cookie。

1、一个完整的cookie的构成：

属性名	默认值	作用
Name		名
Value		值
Domain	当前文档域	作用域
Path	当前文档路径	作用路径
Expires/Max-Age	浏览器会话时间	失效时间
Secure	false	https协议时生效

注：红色是必须有的。

2、cookie的读取：即将一个小型文本文件转换成一个js对象。

		function getcookie(){
			var cookie = {};
			var all = document.cookie;
			if(all === '')
				return cookie;
			var list = all.split('; ');
			for(var i = 0; i < list.length; i ++){
				var item = list[i];
				var p = item.indexOf('=');
				var name = item.substring(0, p);
				name = decodeURIComponent(name);
				var value = item.substring(p + 1);
				value = decodeURIComponent(value);
				cookie[name] = value;
			}
			return cookie;
		}

3、cookie的设置/修改

		//第一种方法：对cookie直接赋值
		document.cookie = 'name=value';
		//第二种
		function setCookie(name, value, expires, path, domain, secure){
			var cookie = encodeURIComponent(name) + '=' + encodeURIComponent(value);
			if(expires)
				cookie += '; expires=' + expires.toGMTString();
			if(path)
				cookie += '; path=' + path;
			if(domain)
				cookie += '; domain=' + domain;
			if(secure)
				cookie += '; secure=' + secure;
			document.cookie = cookie;
		}

4、删除cookie

		function removeCookie(name, path, domain){
			document.cookie = name + '='
			+ '; path=' + path
			+ '; domain=' + domain
			+ '; max-age=0';
		}

5、cookie的缺陷：

①流量代价

②安全性问题（由于它是明文传递的）

③大小限制（一般浏览器对于cookie都只有4kb的大小）

二、storage

1、分类：根据有效期和作用域的不同，分为：localStorage（有效期在用户不对它进行删除的情况下默认为永久）

                                                                                  sessionStorage（有效期在会话结束时消亡）

2、作用域：

localStorage的作用域是由协议、主机名、端口决定的；

sessionStorage的作用域是在localStorage作用域的基础上加上窗口的限制，浏览器不同的窗口间是不共享sessionStorage的。

3、大小：大部分浏览器对storage的支持都在5MB左右。

4、可以将storage理解为一个JS对象：

①读取：

-localStorage.name

②添加/修改

-localStorage.name = "NetEase"(目前只支持string)

③删除

-delete localStorage.name

5、调用API进行增删查改

好处：可以进行向下兼容（如果浏览器不支持storage，可以用cookie进行模拟）

*获取键值对数量

----localStorage.length

*读取

----localStorage.getItem("name"),localStorage.key(i)

*添加/修改

----localStorage.setItem("name", "NetEase")

*删除对应键值

----localStorage.removeItem("name")

*删除所有数据

----localStorage.clear()