WEB 前端技术分享，Javascript 操作 cookie 基本方法

虽然项目中自主 cookie 的需要已经慢慢变少，但某些桌面网站还是能用上的。

BOM 中的 document.cookie 对象包含了所有的 cookie 字符串，以 Internet Explorer 浏览器为例，格式大概为“名称=值;expires=过期时间”，当有多个 cookie 时名称与值以 “ ; ” 号分开，开发者操作 cookie 只能自己进行解析操作，这样就变得非常繁琐，下面的方法提供了三个常用的 cookie 操作方法：

//按照指定的名称、值与存在小时数设置 Cookie
function SetCookie(_name, _value, _hours) {
    var d = new Date();
    d.setTime(d.getTime() + (_hours * 60 * 60 * 1000));
    var expires = "expires=" + d.toGMTString();
    document.cookie = encodeURIComponent(_name) + "=" + encodeURIComponent(_value) + "; " + expires;
}

//返回指定名称的 Cookie 的值
function GetCookie(_name) {
    var name = encodeURIComponent(_name) + "=";
    var ca = document.cookie.split(';');
    for (var i = 0; i < ca.length; i++) {
        var c = ca[i].trim();
        if (c.indexOf(name) == 0) {
            return decodeURIComponent(c.substring(name.length, c.length));
        }
    }
    return undefined;
}

//删除指定名称的 Cookie
function DelCookie(_name) {
    document.cookie = encodeURIComponent(_name) + "=; expires=Thu, 01 Jan 1970 00:00:00 GMT";
}

SetCookie 方法使用小时作为单位，以 “ name=Henry ” 为例，SetCookie("name","Henry",0.5) 可以设置该 cookie 并存在半个小时；GetCookie("name") 可以获取到 "Henry" 的返回值；DelCookie("name") 直接删除，这个时候再调用 GetCookie("name") 只会得到 undefined 的返回值，SetCookie 方法既可以用来新增也可以用来修改。

注：每个浏览器对于 cookie 的操作细节不一定相同，某些浏览器操作 cookie 会立即生效，而某些浏览器则会存在延迟效果，比如两句紧跟着的代码可能会存在先删除 cookie 而后代码能够读取到值的问题，现代项目中建议由服务端联动操作 cookie，慎用前端 cookie。