一.cookie长什么样
打开chrome控制台，我们可以查看cookie
chrome控制台
Name //名称
Value //值
Domain = www.jianshu.com //域,设置二级或三级域名，且不能跨域设置
Path = / //路径，一般为“/”表示根目录，"/write"表示子目录
Expire = 2018-03-10T21:32:26.124Z //过期时间（绝对时间）
Max-Age = 36000 //过期时间（相对时间），ie6/7/8有兼容性问题
Secure //只在https下才发送
HttpOnly //不能通过 JS 的 document.cookis 访问
根据过期时间可将cookie分为：
（1）session cookie(临时cookie，关闭浏览器就删除，不设置Expire或Max-Age便生成session cookie，控制台那显示Session)
（2）premanent cookie（持久cookie，到了过期时间才删除，设置Expire或Max-Age便生成premanent cookie，控制台那显示时间）
二.通过JS操作cookie
1.用JS获取cookie
（1）在控制台输入document.cookie便可获取cookie：
"read_mode=day; default_font=font2; _ga=GA1.2.1886567652.1502162633; locale=zh-CN; Hm_lvt_0c0e9d9b1e7d617b3e6842e85b9fb068=1520563415,1520576927,1520586845,1520586886; sensorsdata2015jssdkcross=%7B%22distinct_id%22%3A%2215f32c9cfcb464-090a5a34d92563-31677c00-2073600-15f32c9cfcc64e%22%2C%22%24device_id%22%3A%2215f32c9cfcb464-090a5a34d92563-31677c00-2073600-15f32c9cfcc64e%22%2C%22props%22%3A%7B%22%24latest_traffic_source_type%22%3A%22%E7%9B%B4%E6%8E%A5%E6%B5%81%E9%87%8F%22%2C%22%24latest_referrer%22%3A%22%22%2C%22%24latest_referrer_host%22%3A%22%22%2C%22%24latest_search_keyword%22%3A%22%E6%9C%AA%E5%8F%96%E5%88%B0%E5%80%BC_%E7%9B%B4%E6%8E%A5%E6%89%93%E5%BC%80%22%7D%2C%22first_id%22%3A%22%22%7D; Hm_lpvt_0c0e9d9b1e7d617b3e6842e85b9fb068=1520691212"
可见，返回的是一个字符串(编码状态，需用decodeURIComponent()进行解码)，字符串中的每一个都是名值对，每一个名值对都用；隔开
（2）如果要获取特定名称的cookie的value时，可用以下的方法：
// 例：name1=value1;name2=value2;name3=value3
// （1）使用普通方法
function getCookie(cname) {
var name = cname + "=";
var decodedCookie = decodeURIComponent(document.cookie); //解码
var ca = decodedCookie.split(';');
for(var i = 0; i<ca.length ; i++) {
var c = ca[i];
while(c.charAt(0) == ' ') {
c = c.substring(1);
}
if(c.indexOf(name) == 0){
return c.substring(name.length, c.length);
}
}
return "";
}
getCookie('name1'); //返回value1
// （2）使用正则表达式
function getCookie(name) {
var decodeCookie = decodeURIComponent(document.cookie);
var reg = new RegExp(name+'=(.*?);')；
var ret = reg.exec(decodeCookie)；
return ret[1]；
}
getCookie('name1'); //返回value1
2.用JS增加cookie
- 用赋值语句来增加cookiie
// （1）简单案例（只用于说明，不推荐，详见（2）一般用法）
// cookie：name1=value1;name2=value2;name3=value3
document.cookie = "username = mike"
// cookie：name1=value1;name2=value2;name3=value3;username=mike
// （2）一般用法（需进行编码）
document.cookie = encodeURIComponent('username') + '=' +
encodeURIComponent('mike') + //编码
'; domain=www.jianshu.com' + //添加属性
'; expires=' + new Date('2030-1-1');
3.用JS删除cookie
- 给cookie赋值一个过去的时间来实现删除
document.cookie = encodeURIComponent('username') + '=' +
encodeURIComponent('mike') +
'; domain=www.jianshu.com' +
'; expires=' + new Date(0); // 设置一个过去的时间(1970-1-1)
三.cookie的应用
如下图例子所示：使用cookie保存用户登录信息
使用cookie保存用户登录信息
