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

    • 普通赋值

      img

    • 带过期时间,设置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路径(子路径可以取到父级路径的) 。他们都不能跨域

艾欢欢
410 声望20 粉丝