Vue项目总结（4）--- 在前端使用cookie储存用户信息

本文链接：https://blog.youkuaiyun.com/Dwyane1279/article/details/121322889

这篇博客总结了在Vue项目中如何使用cookie来存储用户信息和追踪用户操作。首先在utils目录创建cookie.js文件，定义了设置、获取和删除cookie的函数。接着在index.js中导入并添加到vue原型，使所有组件能通过`this.cookie`访问。最后，作者计划进一步学习在项目中追踪用户操作的知识。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在项目中，有一些功能需要用户完成登录才能使用。比如说点赞和发布问题、发布回答等……这时候，可以用cookie存储用户信息，以及追踪用户的操作。

使用cookie的步骤：

1.在utils目录下新建cookie.js文件

/**

* @description 保存cookie

* @param {Object} json 需要存储cookie的对象

* @param {Number} days 默认存储多少天

*/

function setCookie(json, days) {

    // 设置过期时间

    let data = new Date(

        new Date().getTime() + days * 24 * 60 * 60 * 1000

    ).toUTCString();

    for (var key in json) {

        document.cookie = key + "=" + json[key] + "; expires=" + data;

    }

}

/**

* @description 获取cookie

* @param {String} name 需要获取cookie的key

*/

function getCookie(name) {

    var arr = document.cookie.match(new RegExp("(^| )" + name + "=([^;]*)(;|$)"));

    if (arr != null) {

        return unescape(arr[2]);

    } else {

        return null;

    }

}

/**

* @description 删除cookie

* @param {String} name 需要删除cookie的key

*/

function clearCookie(name) {

    let json = {};

    json[name] = '';

    setCookie(json, -1)

}

export default {

    setCookie,

    getCookie,

    clearCookie,

}