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

jiezi

6 年前

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

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

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

特性

赋值

封装

与 localStorage，sessionStorage 的区别