cookie 不是window下面的属性，它是document下面的属性，cookie有一套专门的取值与赋值方法，与localStorage，sessionStorage不同

特性

  1. cookie在document下面
  2. cookie可以设置一个时间自动去清除缓存，cookie如果不设置清除时间，则关闭浏览器自动清除。
  3. cookie它可以跨页面，但是不可以跨path路径(子路径可以取到父级路径的) ，前提是同域

赋值

  • 新建一个文件夹，在文件夹下新建一个html页面 cookie3.html 和一个名为path2的文件夹
  • 在path2文件夹下新建 cookie4.html
  • 先看一下cookie：

  • 赋值

    // 普通赋值document.cookie = 'userName=Aihh' // 带过期时间 10s后清除cookievar d = new Date();d.setTime(Date.now() + 10*1000);document.cookie = 'userName=Aihh;Expires=' + d.toUTCString(); // 带访问路径document.cookie="age=18;path=/path2";

    注意：

    • 设置过期时间使用的是0时区的时间，而我们北京时间是+8区的时间，所以这个时候要调用 toUTCString() 转换为标准时区的时间；
    • path=/path2 设置只有在路径path2下面的网页才能访问（前提是同域）,如果是 path=/ 则说明是根路径，任何同域页面都可以访问。

  • 赋值后打开 Application 查看 cookie

    • 普通赋值

    • 带过期时间，设置10s后过期

    • 带路径，设置只有在路径path2下面的网页才能访问（前提是同域）

      • 这个时候发现在 cookie3.html 找不到这个cookie

      • 再打开path2下面的 cookie4.html ，就会看到这个cookie

封装

cookie 属性和值是用 = 连接，属性之间用 ; 分隔，根据这个特点进行封装
var CookieHelper = {    addCookie: function (cookieName, cookieValue, exMinutes, cookiePath) {        // 第三/四个参数，按需传参        var str = cookieName + "=" + cookieValue;        if (arguments.length == 3) {            let d = new Date();            d.setTime(Date.now() + exMinutes*60*1000); // 过期单位这里设置为分钟            str += ";Expires=" + d.toUTCString();        }        if (arguments.length == 4) {            str += ";path=" + cookiePath;        }        document.cookie = str;    },    getCookie: function (cookieName) {        var cookieArr = document.cookie.split(";");        for (let i in cookieArr) {            var arr = cookieArr[i].split("=");            if (arr[0].trim() == cookieName) {                return arr[1];            }        }    },    removeCookie: function (cookieName) {        document.cookie = cookieName + "= ;Expires=" + (new Date()).toUTCString();    }}

与 localStorage，sessionStorage 的区别

  1. localStorage，sessionStorage在window下面， cookie在document下面
  2. localStorage要手动清除，sessionStorage关闭浏览器自动清除，而cookie可以设置一个时间自动去清除,cookie如果不设置清除时间，则关闭浏览器自动清除。
  3. localStorage可以跨同域页面，sessionStorage只能跨父子页面（通过 open() 打开的页面），cookie它可以跨页面，但是不可以跨path路径(子路径可以取到父级路径的) 。他们都不能跨域