BOM编程-cookie的赋值过期时间path路径封装以及与Storage的区别

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 后清除 cookie
  var 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 路径 (子路径可以取到父级路径的)。 他们都不能跨域