27.Cookie与存储
Cookie与存储
学习要点：
1.cookie
2.cookie局限性
3.其他存储
随着Web越来越复杂，开发者急切的需要能够本地化存储的脚本功能，这个时候，第一个出现的方案：cookie诞生了。cookie的意图是：在本地的客户端的磁盘上以很小的文件形式保存数据。
一、Cookie
cookie也叫HTTPCookie，最初是客户端与服务器端进行会话使用的。比如，会员登录，下次回访网站时无须登录了，或者是购物车，购买的商品没有及时付款，过两天发现购物车里还有之前的商品列表。
HTTPCookie要求服务器对任意HTTP请求发送Set-Cookie，因此，Cookie的处理原则上需要在服务器环境下进行。当然，现在大部分浏览器在客户端也能实现Cookie的生成和获取。（目前Chrome不可以在客户端操作，其他浏览器均可）
cookie的组成
cookie有名/值对形式的文本组成：name=value ， 完整格式为：
name = value;[expires = date];[path=path];[domain=somewhere.com];[secure]
中括号是可选，name=value 是必选
document.cookie = 'user=' + encodeURLComponent('征程'); //编码写入
alert(decodeURLComponent(document.cookie)); //解码读取
expires=date 失效时间，如果没有声明，则为浏览器关闭后即失效。声明了失效时间，那么时间到期后方能失效。
var date = new Date();
date.setDate(date.getDate() + 7);
document.cookie = 'user='+encodeURLComponent('征程')+';expires='+date;
use=值;expires=失效时间;path=路径访问;domain=域名访问;secure=安全的https限制
PS：可以通过Firefox浏览器查看和验证失效时间。如果要提前删除cookie也非常简单，只要重新创建cookie把时间设置当前时间之前即可：date.getDate()-1或new Date(0)。
path=path 访问路径，当设置了路径，那么只有设置的那个路径文件才可以访问cookie。
var path = '/E:/%E5%A4%87%E8%AF%BE%E7%AC%94%E8%AE%B0/JS1/29/demo';
document.cookie="user="+encodeURLCompenent('征程')+";path="+path;
PS：为了操作方便，我直接把路径复制下来，并且增加了一个目录以强调效果。
domain=domain 访问域名，用于限制只有设置的域名才可以访问，那么没有设置，会默认限制为创建cookie的域名。
var domian= 'baidu.com';
document.cookie = "user="+encodeURLComponent('征程')+";domain="+domain;
PS：如果定义了baidu.com，那么在这个域名下的任何网页都可以访问，如果定义了v.baidu.com，那么只能在这个二级域名访问该cookie，而主域名和其他子域名则不能访问。
PS：设置域名，必须在当前域名绑定的服务器上设置，如果在baidu.com服务器上随意设置其他域名，则会无法创建cookie。
secure安全设置，指明必须通过安全的通过安全的通信来传输（HTTPS）才能获取cookie。
document.cookie = "user=" + encodeURLComponent('征程')+";secure";
PS：https安全通信链接需要单独配置。
JavaScript设置、读取和删除并不是特别的直观方便，我们可以封装成函数来方便调用。
//设置cookie
function setCookie(name,value,expires,path,domain,secure){
var cookieName = encodeURIComponent(name)+'='+encodeURIComponent(value);
if(expires instanceof Date){
cookieName +='; expires='+ expires;
}
if(path){
cookieName +='; expires='+expires;
}
if(domain){
cookieName +='; domain='+domian;
}
if(secure){
cookieName +='; secure';
}
document.cookie = cookieName;
}
//获取cookie
function getCookie(){
var cookieName = encodeURIComponent(name) + '=';
var cookieStart = document.cookie.indexOf(cookieName);
var cookieValue = null;
if(cookieStart>-1){
var cookieEnd = document.cookie.indexOf(';' , cookieStart);
if(cookieEnd == -1){
cookieEnd = document.cookieEnd.length;
}
cookieValue = document.cookie.substring(cookieStart + cookieName.length , cookieEnd);
return cookieValue;
}
}
alert(getCookie('user'));
alert(getCookie('url'));
alert(getCookie('emial'));
//过期时间
function setCookieDate(day){ //传递一个天数，比如7，就是7天后失效
var date = null;
if(typeof day == 'number' && day>0){
date = new Date();
date.setDate(date.getDate()+day);
}else{
throw new Error('天数不合法！必须是数字且大于0');
}
return date;
}
//setCookie('user' , 'journey' , setCookieDate(7));
