vue项目中直接操作cookie

封装设定cookie函数

        // 没有定义时效
        // document.cookie = 'phone=1';

        // 设定cookie时效的语法,设定的时效,就是时间对象的时间戳
        // JavaScript时间对象的默认时间戳是,本地时间,与服务器时间有时差,必须要计算时差
        // 还必须要计算时效时间
        // 新的时间戳,要设定为时间对象的时间戳
        // document.cookie  = 'phone=1;expires=时间对象';

        // 删除cookie,只要将时效性定义为-1就行了


        // 通过函数的形式来设定cookie,定义时效
        // 三个参数:名称,数据,时效

        function mySetCookie(key, value, time) {
            // JavaScript中计时单位都是毫秒

            // 1,获取当前时间
            let t = new Date();
            // 获取当前时间戳 单位是毫秒
            // 服务器的事件与当前本地时间相差8个小时,减去8个小时的毫秒
            // 还必须计算当前的时效,秒转化为毫秒
            // 当前cookie新的时间戳
            let t1 = t.getTime() - 8 * 60 * 60 * 1000 + time * 1000;

            // 将这个新的时间戳,设定为 Date()对象的时间戳
            // 将cookie的时效,设定为当前时间对象Date()对象的时间戳
            // 将计算好的t1时间戳,设定为t时间对象的时间戳
            t.setTime(t1);

            // 设定cookie,名称是参数key,数据是参数value
            // 时效是,t时间对象的时间戳,也就是计算过的t1
            document.cookie = `${key}=${value};expires=${t}`;
        }

        mySetCookie('phone', '1', 60);

            // getTime() 是获取当前时间的时间戳
            // setTime() 是设定当前时间的时间戳

封装获取cookie函数

       // JavaScript中cookie是一个字符串
        // 名称=数据; 名称=数据

        // 例如: age=18; sex=男; addr=北京; name=100

        // 如果想要获取cookie中的数据信息,就只能自己设定程序
        // 将cookie字符串,转化cookie对象,方便通过名称获取数据
        
        function getCookie(cookieStr) {
            // 建立一个空对象,存储cookie的数据
            const obj = {};

            // 1,获取cookie字符串,以 ;空格为间隔内容,转化为数组
            let arr = cookieStr.split('; ');
            // console.log(arr);

            // 2,在循环遍历数组中的单元,提取单元的数据
            // name=100,以等号为间隔,再次转化为数组
            arr.forEach(function (item) {
                // 将itme,也就是name=100,再以=为间隔,转化为数组
                let newArr = item.split('=');
                // 将数组newArr中数据,写入到对象中
                // 数组newArr是 ['name','100'];
                // newArr[0]是name newArr[1]是100
                // 给obj中添加单元,单元的属性是name,单元的数据是100
                obj[newArr[0]] = newArr[1];
            })

            return obj;
        }

        const cookieObj = getCookie(document.cookie);

        // 总结步骤

        // 前端获取到的cookie是一个字符串
        // 形式 名称=数据; 名称=数据; 名称=数据
        // 最终需要将字符串转化为对象
        // 步骤: 
        // 1: 以 分号空格 为间隔,将cookie字符串转化为数组
        //   数组的形式 
        /*
            [
                0:'name=100',
                1:'age=18',
                2:'sex=男',
                3:'addr=北京',
            ]

            2: 循环遍历生成的数组,获取数组的单元数据,再以等号为间隔,转化为新的数组
            结果  ['name' , '100']
                 ['age' , '18']
                 ['sex' , '男']
                 ['addr' , '北京']

            3: 将数组的第一个单元作为对象的属性,第二个单元作为对象的属性值
                obj[newArr[0]] = newArr[1]

            4: 整个循环结束之后,将对象作为返回值

 

使用 js-cookie 工具

地址：

https://www.npmjs.com/package/js-cookie

 

//安装 
cnpm i js-cookie
//引入
import Cookies from 'js-cookie'

使用方法：

Basic Usage

Create a cookie, valid across the entire site:

Cookies.set('name', 'value');
Create a cookie that expires 7 days from now, valid across the entire site:

Cookies.set('name', 'value', { expires: 7 });
Create an expiring cookie, valid to the path of the current page:

Cookies.set('name', 'value', { expires: 7, path: '' });
Read cookie:

Cookies.get('name'); // => 'value'
Cookies.get('nothing'); // => undefined
Read all visible cookies:

Cookies.get(); // => { name: 'value' }
Delete cookie:

Cookies.remove('name');
Delete a cookie valid to the path of the current page:

Cookies.set('name', 'value', { path: '' });
Cookies.remove('name'); // fail!
Cookies.remove('name', { path: '' }); // removed!
IMPORTANT! when deleting a cookie, you must pass the exact same path and domain attributes that was used to set the cookie,
 unless you're relying on the default attributes.

Note: Removing unexisting cookie does not raise any exception nor return any value