JS操作cookie

一、 Cookie

本篇文章主要讲述对cookie的操作,如设置、读取、检查、删除

首先了解下cookie的基本知识:

关于cookie

Cookie,有时也用其复数形式 Cookies。类型为“小型文本文件”,是某些网站为了辨别用户身份,进行Session跟踪而储存在用户本地终端上的数据(通常经过加密),由用户客户端计算机暂时或永久保存的信息。

组成

Cookie是一段不超过4KB的小型文本数据,由 一个名称(Name)、一个值(Value) 和其它几个用于控制Cookie有效期、安全性、使用范围的可选属性组成。

特点

  • Cookie 存储数据在客户端浏览器
  • 浏览器对于单个 Cookie 的大小有限制(4kb)以及对同一个域名下的总 Cookie 数量也有限制(20个)
  • 可以在不登录的情况下,完成服务器对客户端的身份识别

二、 操作cookie

大致了解cookie后,发现cookie其实挺重要的,例如项目里面前后端交互,很多就是使用cookie来进行校验的。那在项目里面怎么使用呢?

1. 新建cookie.js

一般情况下,为了在项目里能友好的使用一个功能,那么就会将其封装,然后模块导出使用。此时,我们可以在目录下新建文件夹util,在util中将各种封装的工具类放入。此时我们可以在 util 下新建 cookie.js 文件。

2. 设置cookie

这类使用场景较多,例如登录或将部分信息存储到cookie等场景都会用到。

新建 setCookie 方法,将常用的内容放到参数中,如: key, value, 过期时间等。我们以这三个参数为例,那么设置 cookie 的方法如下:

// 设置cookie
export function setCookie(c_name, value, expire_days) {
    let exDate = new Date();
    exDate.setDate(exDate.getDate() + expire_days);
    document.cookie =
        c_name +
        '=' +
        encodeURIComponent(value) +
        ';expires=' +
        exDate.toUTCString() +
        ';path=/';
}

3. 读取cookie

顾名思义,读取,不需要改变什么,那么只需要知道要读取的 cookie 名即可,如果没有找到则返空处理:

export function getCookie(c_name) {
    let c_start = null;
    let c_end = null;
    if (document.cookie.length > 0) {
        c_start = document.cookie.indexOf(c_name + '=');
        if (c_start !== -1) {
            c_start = c_start + c_name.length + 1;
            c_end = document.cookie.indexOf(';', c_start);
            if (c_end === -1) c_end = document.cookie.length;
            return decodeURIComponent(document.cookie.substring(c_start, c_end));
        }
    }
    return '';
}

4. 检查cookie

同样,只需要 cookie 名即可知道是否存在此cookie:

// 检查cookie
export function checkCookie(c_name) {
    let username = getCookie(c_name);
    if (username !== null && username !== '') {
        return true;
    } else {
        return false;
    }
}

5. 清除cookie

在进行退出登录等操作时,一般我们需要将 cookie 进行清除,操作比较简单,接收到要清除的 cookie 名后操作即可,如下:

// 清除cookie
export function clearCookie(name) {
    setCookie(name, '', -1);
}

三、 具体使用

在对 cookie 进行了这四个方法处理后,一般的业务场景都可满足。那么怎么使用呢?

以 vue 为例,使用方法如下:

1. 引入挂载

在 main.js 中操作:

// ...
import Vue from 'vue'
// 引入
import { setCookie, getCookie, checkCookie, clearCookie } from '@/util/cookie'

// 挂载到Vue实例上
Vue.prototype.$setCookie = setCookie;
Vue.prototype.$getCookie = getCookie;
Vue.prototype.$checkCookie = checkCookie;
Vue.prototype.$clearCookie = clearCookie;

2. 组件使用

在需要用到的组件,如登陆组件中,在登陆检验完毕后,后端返回了 cookie 值。在于后端商量好 cookie 名之后,便可设置:

// 例如 res 是拿到的后端的返回值
let res = {
    code: 200,
    data: {
        value: 'ads12as1d32sa13d1sa2d13sa1f'
    },
    msg: '登陆成功'
};
// 与后端写上 cookie 名,例如是:test_cookie_name
let cookieName = 'test_cookie_name';
let cookieValue = res.data.value;
// 设置 cookie,有效期1天
this.$setCookie(cookieName, cookieValue, 1);

当然,检查、读取、删除一样处理即可。

小结

还是蛮简单的,一个小操作能节省不少前后端数据交互的校验。总结下:

  • 新建 cookie.js 文件
  • 写几个操作 cookie 方法,模块打出
  • 全局引入(main.js 挂载到 Vue)上,或者在组件中局部引入
  • 在合适的场景下合理调用即可。

推荐阅读更多精彩内容