实用主义:前端cookie介绍及操作封装

前言

前端开发中,少不了对cookie进行操作,那么cookie究竟是什么东西呢?

Cookie,有时也用其复数形式 Cookies,指某些网站为了辨别用户身份、进行 session 跟踪而储存在用户本地终端上的数据(通常经过加密)。定义于 RFC2109 和 2965 中的都已废弃,最新取代的规范是 RFC6265[1] 。(可以叫做浏览器缓存) ——百度百科

说白了cookie就是用来存储数据的,并且cookie可以通过HTTP请求进行同域传播(CORS跨域请求默认是不带的)。由于HTTP是无状态协议,cookie也同时用作验证用户信息的凭证。 在WEB的蛮荒纪元中,没有localstorage、sessionstorage,因此cookie常常携带了许多额外的信息,但是浏览器对于每个域的cookie是有数量限制的。直到HTML5的出现,cookie才真正行使的是自己真正的职责——验证。

浏览器中的cookie

document.cookie

浏览器window并没有封装对于cookie的操作,只有唯一的一个document.cookie可以查看(不能查看http-only属性的cookie) 通过document.cookie我们可以看到cookie

"bdshare_firstime=1479130453985; CNZZDATA5578006=cnzz_eid%3D146565046-1476099110-null%26ntime%3D1488271921; Hm_lvt_8e2a116daf0104a78d601f40a45c75b4=1487416700,1487860599,1488207009,1488277146; Hm_lpvt_8e2a116daf0104a78d601f40a45c75b4=1488277146"

这是从runnoob上抓到的cookie。 我们可以看到通过document.cookie得到的是一个字符串,cookie以name=value;的形式进行划分

cookie的属性

这仅仅是包含cookies的字符串,但是cookie还有许多额外的属性,我们可以通过开发者工具台看到

cookie属性

  1. Name:cookie的名字
  2. Value:cookie的值
  3. Domain:cookie所在的域
  4. Path:所在的路径
  5. Expires/Max-age:cookie的有效期,默认为0,只在session期有效
  6. Size:cookie的大小
  7. HTTP:http-only属性,是否只读,默认false
  8. Secure:是否只在https协议中传输,默认false 这里就不展开细致讲解属性了,具体请百度

前端封装cookie操作

浏览器只提供了doucment.cookie属性,如果需要操作,我们需要手动封装操作方法

添加cookie 值为中文需要转码 重复名称会覆盖

function setCookie(name, val, day) {
  let expireDate = new Date();
  expireDate.setDate(expireDate.getDate() + day);
  document.cookie = `${name}=${val};expires=${expireDate.toGMTString()}`;
}

通常我们只需要名称、值和生命期,更多的属性设置修改按照prop=val;的形式修改最后一条代码即可。

读取cookie 返回一个包含cookie键值对的数组

function getCookies() {
  let cookies = [];
  if(document.cookie) {
    let cookieArr = document.cookie.split(';');
    for (let i = 0;i<cookieArr.length;i++) {
      let keyArr = cookieArr[i].split("=");
      let name = keyArr[0];
      let val = keyArr[1];
      cookies.push({name: val});
    }
  } else {
    return false;
  }
  return cookies;
}

删除cookie 把失效日期设置为过期

function removeCookie(name) {
  let cookies = getCookies();
  if (cookies) {
    for(let cookie of cookies) {
     if(cookie.name === name) {
        setCookie(name, null, -99);
        break;
      }
    }
  } else {
    return false;
  }
}

封装为一个单例

通常我们不会允许这些方法称为全局对象,因此需要封装为一个单例CookieManager

let CookieManager = {
  setCookie,
  getCookies,
  removeCookie
};

最后

这是前端操作cookie的方法,后端因为语言众多,因此有各自的方法,通常是设置响应头。 就是这样:)

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏张善友的专栏

分布式文件存储的数据库开源项目MongoDB

MongoDB是一个基于分布式文件存储的数据库开源项目。由C++语言编写。旨在为WEB应用提供可护展的高性能数据存储解决方案。 它的特点是高性能、易部署、易使用...

3339
来自专栏北京马哥教育

linux服务器下LNMP安装与配置方法

云豆贴心提醒,本文阅读时间6分钟 一、准备 1.准备php函数的rpm包 2.准备lnmp其他的源代码包 3.安装php-5.2.14源代码包所需要的函数支...

3629
来自专栏安恒网络空间安全讲武堂

Python编写渗透工具学习笔记二 | 0x02利用FTP与web批量抓肉鸡

0x02利用FTP与web批量抓肉鸡 脚本要实现的目标和思路: 先尝试匿名登录ftp,当匿名登录失败时再尝试用用户/密码爆破登录,登录成功后,脚本会搜索ftp中...

1.6K7
来自专栏前端说吧

Gulp安装流程、使用方法及cmd常用命令导览

4046
来自专栏编程

小白爬虫之爬虫快跑,多进程和多线程

使用多线程时好像在目录切换的问题上存在问题,可以给线程加个锁试试 Hello 大家好!我又来了。 你是不是发现下载图片速度特别慢、难以忍受啊!对于这种问题 一般...

2097
来自专栏算法修养

Flask 学习篇二:学习Flask过程中的记录

Flask学习笔记: GitHub上面的Flask实践项目 https://github.com/SilentCC/FlaskWeb 1.Applicati...

3269
来自专栏iKcamp

基于Koa2搭建Node.js实战(含视频)☞ 中间件用法

中间件用法——讲解 Koa2 中间件的用法及如何开发中间件 文章 middleware 中间件 正是因为中间件的扩展性才使得 Koa 的代码简单灵活。 在 a...

2755
来自专栏Danny的专栏

【SSH快速进阶】——探索Hibernate对象的三种状态:Transient、Persistent、Detached

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/huyuyang6688/article/...

982
来自专栏AndroidTv

讲讲断点续传那点儿事提问理论基础代码示例

这次想来讲讲断点续传,以前没相关需求,所以一直没去接触,近阶段了解了之后,其实并不复杂,那么也便来写一篇记录一下,分享给大伙,也方便自己后续查阅。

942
来自专栏技术之路

go微服务框架go-micro深度学习(一) 整体架构介绍

      产品嘴里的一个小项目,从立项到开发上线,随着时间和需求的不断激增,会越来越复杂,变成一个大项目,如果前期项目架构没设计的不好,代码会越来越臃肿,难以...

1.1K3

扫码关注云+社区

领取腾讯云代金券