数据存储
1 cookie
1.1 cookie的组成部分
| 组成 | 注释 |
|---|---|
| name | 名称 |
| value | 值 |
| expires（可选） | 过期时间 |
| path（可选） | 路径 |
| domain（可选） | 域 |
| secure（可选） | 安全性 |
1.1.1 name和value
name和value是cookie必选的部分，且必须在cookie字符串的开头。其中分号是用作不同部分的分隔符，而不会存储在其值中。并且cookie默认是不存储类似特殊符号的，除非使用编码。
//如果没有设置生存期，默认情况下cookie会在浏览器被关闭后过期
document.cookie = "UserName=Morra;";
1.1.2 expires
//过期时间的格式与toUTCString()的格式相同
//一般情况下name,value,expires这三部分用的比较多
document.cookie = "UserName=Morra;expires=Tue,28 Dec 2020 00:00:00 GMT;";
//把过期时间设置为6周后
var expires = new Date();
expires.setMonth(expires.getMonth()+6);
document.cookie = "UserName=Morra;expires="+expires.toUTCString()+";";
注意：当用户删除了cookie或者cookie数量达到上限，cookie会在过期日期之前就失效。
1.1.3 path
path属性是区分大小写的。
document.cookie = "UserName=Morra;expires=Tue,28 Dec 2020 00:00:00 GMT;path=/mysite;";
cookie是在不同域中当然是不能互访的，并且在同一个域的不同目录（前提是同级目录）也是不能互访。比如
www.google.com/morra与ww.google.com/jack的cookie也是不能互访的，但是path目录的子目录之间的cookie是可以互访的，如下：
//ww.google.com/mysite/jack与ww.google.com/mysite/morra之间的cookie是可以互访的
document.cookie = "UserName=Morra;expires=Tue,28 Dec 2020 00:00:00 GMT;path=ww.google.com/mysite;";
1.1.4 domain
与path类似，用于隔离域之间的cookie互访。一般情况下二级域名之间的cookie是不能互访的，但是当domain属性设置为一个一级域名后，其二级域名之间的cookie就能够互访了。
//a.google.com与b.google.com之间的cookie能够互访。
document.cookie = "UserName=Morra;expires=Tue,28 Dec 2020 00:00:00 GMT;path=/mysite;domain=google.com;";
1.1.5 secure
secure属性是一个布尔值。默认为false。如果设为true，则cookie只会发送给尝试使用安全通道检索它的web服务器，一般在SSL中用的比较多。
1.2 应用cookie
编写setCookie()函数来辅助我们进行cookie的设置：
function setCookie(name, value, path, expires) {
value = escape(value); //能把特殊转换为Latin-1字符集中对应的16进制编码，并加上%前缀
if (!expires) { //如果过期日期为空则，默认把其设置为6个月后过期，
var now = new Date();
now.setMonth(now.getMonth() + 6);
expires = now.toUTCString();
}
if (path) {//path是可选的，如果有path，就把路径加上";Path="前缀
path = ";path=" + path;
}
document.cookie = name + "=" + value + ";expires=" + expires + path; //cookie字符串格式化
}
//创建了4个cookie
setCookie("UserName", "Morra");
setCookie("Age", "25");
setCookie("FirstVisit", "28 Dec 2016");
var expires = new Date();
expires.setMonth(expires.getMonth() + 12);
setCookie("Name", "Bob","/morra",expires.toUTCString());
//输出
console.log(document.cookie);
//结果如下：过期日期没有显示,并且含有路径的cookie也不会显示
//UserName=Morra; Age=25; FirstVisit=28%20Dec%202016
//删除cookie，把时间设为过去的时间即可
//setCookie("UserName", "", "", "Mon, 1 Jan 2000 00:00:00");
1.3 cookie的局限性
cookie的局限性如下：
- 读取cookie需要额外编写两个辅助函数 setCookie()与 getCookie()，相当繁琐。
- 浏览器每请求一个新的页面的时候，cookie都会被发送过去，这样无形中浪费了带宽。同时也增加了数据风险，一旦cookie被人拦截了，所有的session信息都会被别人获取。
- 存在过期时间，不能永久存在本地。
- 当用户禁用cookie的时候，需要额外代码处理这种情况。
- 浏览器支持的cookie总数有限，一般为50个，为了突破这种限制，可以在一个cookie中存储多条信息，但这种方法治标不治本。
- cookie在服务器和浏览器之间共享同一块存储空间，使原本就很少的存储空间更加不够用。
- cookie的作用是与服务器进行交互，作为http规范的一部分而存在。而web存储只是为了在本地存储数据而生的。
2 web存储
web存储就是为了解决了以上cookie的若干问题而出现的。其优点是：
- 数据放在浏览器上，不会传给服务器，专供js开发人员使用。
- 存储空间比较大，在Chrome和Firefox中，每个域都有5M空间。
- 本地存储中的数据永久存在，除非手动删除。
web存储包含两个组件：会话存储和本地存储
会话存储是临时的，关闭浏览器后数据会自动清除，使用 sessionStorage对象访问。
本地存储永远存在，使用localStorage对象访问
2.1 定义数据
web存储的中的数据格式本质上是“键值对”，类似py中的字典。
//方法一：
localStorage.setItem("userName","Morra");
//方法二：
localStorage.userName = Morra;
2.2 获取数据
//方法一：
var name = localStorage.getItem("userName");
//方法二：
var name = localStorage.userName;
2.3 删除数据
//方法一：
localStorage.removeItem("userName");
//方法二：
localStorage.userName = null;
删除本地存储中的所有键值对
localStorage.clear();
2.4 把数据存储为字符串
web存储都是针对字符串的数据存储，键与值都只能是字符串。如果要存储数值或复杂对象，会被自动转换为字符串。所以在存储除字符串以外的数据之前，就需要进行串行化：
var personOne = {
name:"Morra",
age:30,
gender:"M"
}
localStorage.person = JSON.stringify(personOne); //定义数据
var savedPerson = JSON.parse(localStorage.person); //获取数据
2.5 在Chrome中查看web存储的数据
F12打开开发工具，单击Application选项卡，左侧的Storage：
