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

Neilyo 发布于2019-08-23 17:14 / 375人阅读

摘要：不是下面的属性，它是下面的属性，有一套专门的取值与赋值方法，与，不同特性在下面可以设置一个时间自动去清除缓存，如果不设置清除时间，则关闭浏览器自动清除。

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 的区别

localStorage，sessionStorage在window下面， cookie在document下面

localStorage要手动清除，sessionStorage关闭浏览器自动清除，而cookie可以设置一个时间自动去清除,cookie如果不设置清除时间，则关闭浏览器自动清除。

localStorage可以跨同域页面，sessionStorage只能跨父子页面（通过 open() 打开的页面），cookie它可以跨页面，但是不可以跨path路径(子路径可以取到父级路径的) 。他们都不能跨域

云服务器 GPU云服务器 session与cookie的区别 cookies和session的区别 cookie和session的区别 session和cookie的区别

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/104019.html

Javascript本地存储小结

摘要：不是很安全，别人可以分析存放在本地的并进行欺骗，考虑到安全应当使用。因此不是一种持久化的本地存储，仅仅是会话级别的存储。用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。前言总括：详细讲述Cookie,LocalStorge,SesstionStorge的区别和用法。人生如画，岁月如歌。原文博客地址：Javascript本地存储小结知乎专栏&&简书专题：前端...

garfileo 2019-08-20 12:19 评论0 收藏0
一文带你看懂cookie，面试前端不用愁

摘要：的属性在浏览器的控制台中，可以直接输入来查看。可以在浏览器的控制台中看出哪些是类型的，下带绿色对勾的即是，如图只要是类型的在控制台通过是获取不到的，也不能进行修改。当会话过期或被放弃后，服务器将终止该会话。在中，用取代了。本文由云+社区发表在前端面试中，有一个必问的问题：请你谈谈cookie和localStorage有什么区别啊？ localStorage是H5中的一种浏览器本地存...

notebin 2019-08-23 13:59 评论0 收藏0
面试题总结

摘要：所以个人建议将登陆信息等重要信息存放为其他信息如果需要保留，可以放在中和属性的异同共同点对内联元素设置和属性，可以让元素脱离文档流，并且可以设置其宽高。不同点仍会占据位置，会覆盖文档流中的其他元素。说说你对闭包的理解使用闭包主要是为了设计私有的方法和变量。闭包的优点是可以避免全局变量的污染，缺点是闭包会常驻内存，会增大内存使用量，使用不当很容易造成内存泄露。闭包有三个特性：函...

RiverLi 2019-08-20 17:33 评论0 收藏0
常见前端本地存储

摘要：说一说常用得本地存储方法这个东西我觉得对于前端来讲都不会很陌生，浏览器都会支持在最初得时候适用于客户端存储会话信息用的，在我们发送请求得时候，响应头会包含此次会话得会话信息返回给客户端，浏览器回存储这样得会话信息并且在本地有了之后，每次发送说一说常用得本地存储方法 cookie localStorage sessionStorage cookie cookie这个东西我觉得对于前...

joy968 2019-08-26 10:23 评论0 收藏0
javascript知识点

摘要：握手过程中使用了的标志和。接收端收到后，回传一个带有标志的数据包以示传达确认信息。第四次挥手主动关闭方收到后，发送一个给被动关闭方，确认序号为收到序号，至此，完成四次挥手。其次，通过使和系统绑定来降低泄露后的危险。一些开放性题目 1.自我介绍：除了基本个人信息以外，面试官更想听的是你与众不同的地方和你的优势。 2.项目介绍 3.如何看待前端开发？ 4.平时是如何学习前端开发的？ 5....

zhangxiangliang 2019-08-20 14:21 评论0 收藏0