当前位置：首页 > news >正文

前端关于cookie那些事儿

news 来源：原创 2024/5/18 22:48:33

关于cookie的作用范围，跨域的问题

主域名不同的cookie是不能数据共享的，但一级域名相同，子域名不同的却可以。
比如 csdn.net 和 blog.csdn.net 和 dengxi.csdn.net 这三种domain的cookie在dengxi.csdn.net这个网站都能拿到。

HTTPOnly属性用来保护cookie

使其不能通过document.cookie读取，一些浏览器可以阻止客户端脚本对Cookie的读操作，但允许写操作。

Secure属性只在https协议下生效，防止在传输过程中，cookie被覆盖或者篡改

浏览器禁止在cookie中设置顶级域名

比如.net 或者.com这种，别耍小聪明，想跨站点访问。

每个域不超过50个cookie，每个cookie最多4 KB
结合cookie的作用范围,如果有超过50个cookie,我们可以分成很多个子域进行储存.但还是尽可能减少cookie的使用,和cookie类似的,我们还可以通过localstorage来达到目的.

获取cookie
前端js通过document.cookie来得到所有网站能拿到的相关的cookie内容是一大串字符串

我们封装一个方法，通过cookie的key，来获取对应的值

 function getCookie(key: string) {
 	// key必须传
    if (key === null) return null;
    if (
      // 判断是不是字符串
      Object.prototype.toString.call(key) == "[object String]"
    ) {
      var arrStr = document.cookie.split(";");
      for (var i = 0; i < arrStr.length; i++) {
        var temp = arrStr[i].split("=");
        // 获取到的key值总是有空格，用trim删掉，对应的value值，我们需要用decodeURIComponent解码后取出
        if (temp[0].trim() == key) return decodeURIComponent(temp[1]);
      }
      return null;
    }
    return null;
  }

我们也可以封装一个方法来保存新的cookie值

  function setCookie(name, value, opts) {
    //opts maxAge, path, domain, secure, seconds 
    if (name && value) {
      var cookie = encodeURIComponent(name) + "=" + encodeURIComponent(value);
      //可选参数
      if (opts) {
        if (opts.maxAge) {
          cookie += "; max-age=" + opts.maxAge;
        } else if(opts.seconds) {
            var expires = new Date();
            expires.setTime(expires.getTime() + opts.seconds * 1000);
            cookie += "; expires=" + expires.toGMTString()
        }

        if (opts.path) {
          cookie += "; path=" + opts.path;
        }

        if (opts.domain) {
          cookie += "; domain=" + opts.domain;
        }

        if (opts.secure) {
          cookie += "; secure";
        }
      }

      document.cookie = cookie;

      return cookie;
    } else {
      return "";
    }
  }