封装cookie方法

1 分钟阅读

获取cookie的值

text
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 ''
}

设置cookie的值

text
document.cookie = 'username=zhangcong'
//设置一个username 其值为zhangcong

为了防止有键值对为汉字等情况 我们最好进行一下编码

text
document.cookie = encodeURIComponent('username') + '=' + encodeURIComponent('zhangcong') + ';domain=chasingdream.cn' + ';expires=' + new Date('2018-1-1')

cookie有个比较特殊的特性是，如果想要删除cookie，需要设置一个过期时间为当前时间以前的时间即可。

text
document.cookie = encodeURIComponent('username') + '=' + encodeURIComponent('zhangcong') + ';domain=chasingdream.cn' + ';expires=' + new Date('0')

通过对这些的了解 我们来简单的封装一个cookie的库，方便我们去操作cookie

text
/**
 * 实现简单 cookie 封装库
 */

 // Cookie 对象
 Cookie = {

    /**
     *  cookie 设置方法
     * @param {String} name 属性名
     * @param {String} value 属性值
     */
    set: function(name, value) {
        document.cookie = encodeURIComponent(name) + '=' + value
    },

    /**
    *  cookie 获取方法
    * @param {String} name 属性名
    * @return {String} 返回对应的属性值
    */
    get: function(name) {
        var Name = name + '='
        var decodedCookie = decodeURIComponent(document.cookie)
        var cArr = decodedCookie.split(';')

        for(var i = 0; i <cArr.length;i++){
            var c = cArr[i]
            if(c.charAt(0) == " "){
                c = c.substring(1)
            }
            if(c.indexOf(Name)==0){
                return c.substring(Name.length, c.length)
            }
        }
        return ''
    },

    /**
    * cookie 删除方法
    * @param {String} name 属性名
    */
    remove: function(name) {
         document.cookie = encodeURIComponent(name) + '= ;expires=' + new Date(0)  
    }

}


Cookie.set('username', 'zhangcong'); // 增加 username=zhangcong cookie
Cookie.get('username'); // zhangcong
Cookie.remove('username'); // 删除 username
相关文章