DOM编程艺术（数据存储）

一、cookie

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

1、一个完整的cookie的构成：属性名默认值作用Name 名Value 值Domain当前文档域作用域Path当前文档路径作用路径Expires/Max-Age浏览器会话时间失效时间Securefalsehttps协议时生效注：红色是必须有的。

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()