前端数据的存储：cookie、sessionStorage、localStorage

前端数据的存储：cookie、sessionStorage、localStorage

cookie：cookie是浏览器提供的一种机制，它将document 对象的cookie属性提供给JavaScript。可以由JavaScript对其进行控制，而并不是JavaScript本身的性质。cookie是存于用户硬盘的一个文件，这个文件通常对应于一个域名，当浏览器再次访问这个域名时，便使这个cookie可用。因此，cookie可以跨越一个域名下的多个网页，但不能跨越多个域名使用。因为cookie机制将信息存储于用户硬盘，因此可以作为全局变量，这是它最大的一个优点。

使用方法：

var date = new Date();//初始化时间
    date.setDate(date.getDate()+7);//过期时间
    var phone = "18768227101";
    document.cookie = "phone="+phone+";expires="+date;
    document.cookie = "password="+"1235"+";expires="+date;

效果：

path如果不设置，那么就会默认是他的当前页面。

sessionStorage和localStorage
sessionStorage和localStorage时html5新加入的特性。
1.sessionStorage：将数据保存在session对象中。所谓session，是指用户在浏览某个网站时，从进入网站到浏览器关闭所经过的这段时间，也就是用户浏览这个网站所花费的时间。session对象可以用来保存在这段时间内所要求保存的任何数据。
2.localStorage：将数据保存在客户端本地的硬件设备(通常指硬盘，也可以是其他硬件设备)中，即使浏览器被关闭了，该数据仍然存在，下次打开浏览器访问网站时仍然可以继续使用。
简单来说，sessionStorage是临时保存数据的，只要会话关闭那么所保存的之就没了。localStorage是永久保存的，除了主动删除。

sessionStorage：

sessionStorage.setItem("phone","18768227101");//设置key和value的值
alert(sessionStorage.getItem("phone"));//获取key=phone的值。

效果：

localstorage：

localStorage.setItem(“phone1”,“12345678901”);

接下来将代码注释掉，

这时候关闭网页然后重新打开：

可以看到cookie的值依然存在。

这时候将时间设置成过去时间：


这时候cookies的值也没有了。

sessionstorage的值已经不存在。

localsossion的值依然存在。