数据存储

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：