前端获取cookie值_cookie介绍

概念

Cookie用于存储web页面的用户信息，由用户客户端计算机暂时或永久保存的信息。

构成

Cookie由名键值对、有效期、作用域、安全性等组成。

• Name=Value
  设置Cookie的名称及对应的值。

• Expires = 日期
  有效期一般分为会话性和持久性，默认是会话性。

• Path = 路径
  定义Web应用可访问的目录。

• Domain = 域名
  设置Web应用访问的域名。

• Secure = 布尔值
  指是否使用HTTPS安全协议发送Cookie，默认是false。

特点

1. 存储大小限制，一般存储4kb。

2. 数量限制，每个域名最多不能超过50个。

3. 有效期限制，时效性。

4. 域的限制，浏览器机制同源策略。

5. 存储类型是字符串，不支持特殊字符，需要转义。

6. cookie会随请求头协议数据传输。

7. cookie明文存储容易伪造及篡改。

8. cookie可以被浏览器禁用。

操作

一、获取cookie的值

function getCookie(key){
    key = `${key}=`;
let cookieStr = decodeURIComponent(document.cookie.replace(/;s*/ig, ';'));
if(!cookieStr){
return '';
    }
let arr = cookieStr.split(';');
let curItem = arr.find(item=>item.indexOf(key) == 0);
if(!curItem){
return '';
    }
return curItem.replace(key, '');
}

二、设置cookie的值及相关属性

function setCookie(key, value, options){
let def = { path: '/', expires: 0 };
let params = Object.assign({}, def, options);
let d = new Date();
if(!!params.expires){
        d.setTime(d.getTime() + params.expires*1000);
        params.expires = d.toUTCString();
    }
let result = Object.keys(params).reduce((acc, akey)=>{
let curVal = params[akey];
return curVal?acc+=`${akey}=${curVal};`:acc;
    },`${key}=${encodeURIComponent(value)};`);
document.cookie = result;
}

三、删除cookie

function delCookie(key){
document.cookie = `${key}=;expires=-1`;
}

往期文章

1. URL介绍

2. localStorage本地存储

3. http请求响应协议

前端咖内容精品，值得关注