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