JavaScript Cookie

cookie是存储在客户端的一些数据，可以使用JavaScript去操作这些数据。cookie以 名称=值 的形式存储数据，常用于记录客户端信息，当浏览器从服务器上请求 web 页面时， 属于该页面的 cookie 会被添加到该请求中，服务端通过这种方式来获取用户的信息。

chrome浏览器在本地获取不到cookie，必须在服务器上才可以。如果是本地的话，推荐使用Firefox或者Chrome51旧版本的浏览器，或者搭建本地服务器。

创建Cookie

JavaScript 可以使用 document.cookie 属性来创建 、读取、及删除 cookie。

创建cookie：

document.cookie = "username = Cherry";
//cookie可以通过expires属性设置有效期，默认关闭浏览器即失效
document.cookie = "username = Cherry; expires = 2022 Dec 31 12:00";
//path属性可以告诉浏览器cookie路径，默认属于当前页面
document.cookie = "username = Cherry; expires = 2022 Dec 31 12:00; path = /";

读取Cookie：

可以通过将document.cookie赋值给变量来读取cookie

document.cookie = "username = Cherry";
var x = document.cookie;
console.log(x);//username=Cherry

如果是多个cookie，则会以字符串返回。

document.cookie = "username = Cherry";
document.cookie = "age = 18";
var x = document.cookie;
console.log(x);
//username=Cherry; age=18;

修改cookie, 修改cookie只需将原来的值覆盖即可。

document.cookie = "username = Cherry";
document.cookie = "username = Maria";
console.log(document.cookie);
//username=Maria

删除cookie：

删除一个cookie也很简单，只需将expires属性设置一个过去时间即可。

document.cookie = "username = Cherry; expires = 2000 Dec 31 00:00:00";

封装函数

可以将设置cookie，读取cookie和删除cookie封装成函数，方便使用。

设置cookie：

function setCookie(c_name, value, expiredays){
　　var exdate=new Date();
　　exdate.setDate(exdate.getDate() + expiredays);
　　document.cookie=c_name+ "=" + escape(value) + ((expiredays==null) ? "" : ";expires="+exdate.toGMTString());
}

读取cookie：

function getCookie(name){
    var arr,reg=new RegExp("(^| )"+name+"=([^;]*)(;|$)");
    if(arr=document.cookie.match(reg))
        return (arr[2]);
    else
        return null;
}

删除cookie：

function delCookie(name){
    var exp = new Date();
    exp.setTime(exp.getTime() - 1);
    var cval=getCookie(name);
    if(cval!=null){
        document.cookie= name + "="+cval+";expires="+exp.toGMTString();
    }
}

完整例子：

function setCookie(cname, value, expiredays){
　　var exdate=new Date();
　　exdate.setDate(exdate.getDate() + expiredays);
　　document.cookie=cname+ "=" + escape(value) + ((expiredays==null) ? "" : ";expires="+exdate.toGMTString());
}
function getCookie(name){
    var arr,reg=new RegExp("(^| )"+name+"=([^;]*)(;|$)");
    if(arr=document.cookie.match(reg))
        return (arr[2]);
    else
        return null;
}
function delCookie(name){
    var exp = new Date();
    exp.setTime(exp.getTime() - 1);
    var cval=getCookie(name);
    if(cval!=null){
        document.cookie= name + "="+cval+";expires="+exp.toGMTString();
    }
}
setCookie("cname","Herry",1);
console.log(getCookie("cname"));//Herry
delCookie("cname");
console.log(getCookie("cname"));//null