JS原生封装保存cookie函数和删除cookie函数

cookie介绍

HTTP Cookie（也叫Web Cookie或浏览器Cookie）是服务器发送到用户浏览器并保存在本地的一小块数据，它会在浏览器下次向同一服务器再发起请求时被携带并发送到服务器上。通常，它用于告知服务端两个请求是否来自同一浏览器，如保持用户的登录状态。Cookie使基于无状态的HTTP协议记录稳定的状态信息成为了可能。

Cookie主要用于以下三个方面：

• 会话状态管理（如用户登录状态、购物车、游戏分数或其它需要记录的信息）
• 个性化设置（如用户自定义设置、主题等）

• 浏览器行为跟踪（如跟踪分析用户行为等）

  查询并保存cookie——函数封装

  /**
 * 获取/保存 cookie
 * @param key cookie名
 * @param value cookie值，可选，当不传递时，表示根据 cookie 名查找 cookie 值
 * @param options 可配置选项参数，如：{expires:3, path:"/", domain:".baidu.com", secure:true}
 */
function cookie(key, value, options) {
    // 未传递 value 参数，则表示读取 cookie
    if (typeof value === "undefined") {
        // 将域下所有 cookie 读取出来，以 "; " 分割保存到数组中
        var cookies = document.cookie.split("; ");
        // 遍历迭代所有的 cookie ，查找指定 key 对应的 cookie 值
        for (var i = 0, len = cookies.length; i < len; i++) {
            // 将当前遍历到的 cookie 使用 "=" 分割
            var parts = cookies[i].split("=");
            // 数组中第一个元素为 cookie 名，将 cookie 名解码
            var name = decodeURIComponent(parts.shift());
            // 判断当前 cookie 名与待查找 cookie 的名称是否一致
            if (name === key) // 找到 cookie，则返回对应 cookie 值
                return decodeURIComponent(parts.join("="));
        }

        // 如果循环迭代完毕所有 cookie 都不存在要查找的 cookie 信息，则说明未保存过
        return undefined;
    }

    // 传递了 value 参数，表示保存 cookie
    // "key=value"，将 key 和 value 编码
    var _cookie = encodeURIComponent(key) + "=" + encodeURIComponent(value);
    // 判断可配置选项
    options = options || {};
    if (options.expires) { // 有失效时间的配置
        var date = new Date();
        date.setDate(date.getDate() + options.expires);
        _cookie += ";expires=" + date.toUTCString();
    }
    if (options.path) // 有配置路径
        _cookie += ";path=" + options.path;
    if (options.domain) // 域
        _cookie += ";domain=" + options.domain;
    if (options.secure) // 安全链接
        _cookie += ";secure";
    // 保存 cookie
    document.cookie = _cookie;
}

移除cookie——函数封装

/**
 * 删除 cookie
 * @param key cookie名
 * @param options 可配置选项参数，如：{expires:3, path:"/", domain:".baidu.com", secure:true}
 */
function removeCookie(key,options){
    options = options||{};
    options.expires = -1;
    cookie(key,"",options);
}

示例

cookie("products")//查询name名为products的cookie数据并返回cookie值
cookie("products",value,{expires:2,path:"\"})//保存name名为products的cookie数据并配置该cookie数据的有效时间和路径；