js对cookie的操作

OECOM

发布于 2020-07-02 11:49:13

6.7K0

发布于 2020-07-02 11:49:13

文章被收录于专栏：OECOMOECOM

cookie是网站为了标识用户身份而存储在用户本地终端上的数据，一般这些数据都会进行加密，以防止数据篡改而造成用户信息泄露。cookie数据始终在同源的http请求中携带，他会在服务器和浏览器之间进行数据交互时进行来回传递。对cookie不仅浏览器端可以进行操作，服务器端也可以进行操作，在这里只说一下浏览器端对于cookie的存取及删除操作。

添加cookie

在说操作之前，首先需要了解一下cookie是如何存储的，我们随便打开一个网站，在控制台输入document.cookie

我们发现cookie的存储方式是key=value; key=value的形式存储的，这里面全都是在有效期内的cookie。了解了存储方式，我们就可以进行set操作了：

let setCookie=(key, value, days) =>{
    let now = new Date();
    let expires = '';
    let formatValue = '';
    if(days){
       now.setTime(now.getTime() + days * 24 * 60 * 60 * 1000);
        expires = ";expires=" + now;
       }
    if(!key){
       return false
    }
    try{
        formatValue  = JSON.stringify(value);
    }catch(e){
        console.log(e);
        return false;
    }
    document.cookie = key + "=" + formatValue + expires;
}

我们设置的过期时间以天为单位，当你想关闭浏览器时就cookie就直接失效，则可不传入days，当不对cookie设置任何正、负或0时间，也就是说对expire不设置，他就会在浏览会话结束时过期。

获取cookie值

上面已经说过了document中存储cookie的形式了，而且过期的cookie不会出现在document.cookie中，这样我们在获取的时候只需要将其进行格式化即可：

let getCookie=key=> {
    //如果cookie中有数据  才可以获取数据
    if (document.cookie) {
      let cookieInfo = document.cookie;
      //cookie中可能会包含一些 额外的数据，这些数据特点是由   分号和空格间隔的
      //所以 先将 分号和空格  替换掉   替换成  ;
      let arr = cookieInfo.replace(/;\s/g, ';').split(";");
      let item,brr
      for (let i = 0; i < arr.length; i++) {
        item = arr[i].split("=");
        if (item[0] === key) {
          brr = item[1];
          return JSON.parse(brr);//如果找到 我们想要的键，将值转成数组返回
        }
      }
      //如果cookie中 没有我们想获取的键值，直接返回一个空数组
      return [];
    }
    //如果cookie中没有数据，直接返回一个空数组
    return [];
  }

删除cookie

删除cookie最简单的办法就是给cookie的过期时间设置一个过去的时间，让他过期就好：

let removeCookie=key=> {
    setCookie(key, "", -1);
  }

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2019-02-22，如有侵权请联系 cloudcommunity@tencent.com 删除

网络安全

存储

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体分享计划，欢迎热爱写作的你一起参与！

网络安全

存储

登录后参与评论

0 条评论

热度