细讲前端设置cookie, 储存用户登录信息,事件分发源码

48 阅读3分钟

更多面试题

**《350页前端校招面试题精编解析大全》**内容大纲主要包括 HTML,CSS,前端基础,前端核心,前端进阶,移动端开发,计算机基础,算法与数据结构,项目,职业发展等等

开源分享:docs.qq.com/doc/DSmRnRG…

我们来看看浏览器上 cookie 的信息, 可以看到图上显示该cookie到期时间就是会话结束,即关闭浏览器 cookie 清除,这是因为我们在设置cookie时,只设置了 cookie的值,可没设置到期时间。

在这里插入图片描述

但是我们知道 cookie 是用来保存用户的登录信息的, 我们不能让 cookie 一直在浏览器上存在,需要给 cookie 设置一个到期时间, 接下来我们来看这样一段代码

我们来看一下设置了过期时间后的cookie 是一个什么样的情况

在这里插入图片描述

明显可以看到,此时浏览器上的 cookie 有了一个过期时间, 所以我们再一次重启浏览器, 这个 cookie 还是存在的

注意:这里补充一点,我们如果想要设置多条 cookie , 我们必须一条一条设置,不能批量设置,例如如果要设置两条cookie的话:

二、查看cookie


那么我们如何查看浏览器上的cookie呢?这就非常简单了

可以看到返回的是一串字符串, 每个cookie由分号隔开

在这里插入图片描述

如果我们想要获取cookie中某个单独的 cookie,我们可以用正则进行匹配

我们来看一下输出的值:

在这里插入图片描述

这样就得到了我们想要查询的单个cookie值

三、删除cookie


设置cookie是设置了一个cookie值并给它一个过期时间,这样 cookie才不会因为关闭浏览器而立马失效。所以删除 cookie 我们只需要给该cookie设置一个比现在时间还早的时间让cookie过期。

我们只需要给我们需要删除的 cookie 设置一个过期时间为比现在的时间还早的时间,就可以删除这个cookie

在这里插入图片描述

删除后重新打开网页,我们可以看到 名称为 name 的 cookie 已经被删除了

四、封装cookie操作


操作cookie有这么多方法, 我们对他们进行封装, 方便我们使用他们。

  • 封装设置cookie的函数

让我们来使用一下setCookies函数

// 第一个参数为对象,用键值对的形式传入我们想设置的cookie名和值

// 第二个参数为过期时间,单位为天

setCookies({

name: '张三',

age: 19,

like: '羽毛球'

}, 7)

  • 封装查看cookie函数

//查看cookie

function searchCookie(cookieName) {

let re = new RegExp("\s?" + cookieName + "=([^;]+)(;|$)")

return document.cookie.match(re)[1]

}

让我们来使用一下 searchCookie 函数

// 该函数只有一个参数,即我们需要查询的cookie名称,然后返回一个值

let cookieValue = searchCookie(name)

结尾

正式学习前端大概 3 年多了,很早就想整理这个书单了,因为常常会有朋友问,前端该如何学习,学习前端该看哪些书,我就讲讲我学习的道路中看的一些书,虽然整理的书不多,但是每一本都是那种看一本就秒不绝口的感觉。

以下大部分是我看过的,或者说身边的人推荐的书籍,每一本我都有些相关的推荐语,如果你有看到更好的书欢迎推荐呀。

开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

前端学习书籍导图-1