前端cookie操作用到的一些小总结

最新推荐文章于 2024-07-11 16:36:05 发布

weixin_34233618

最新推荐文章于 2024-07-11 16:36:05 发布

阅读量70

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/bug-master/p/6687859.html

本文介绍如何在前端使用JavaScript操作Cookie，包括设置、读取及删除Cookie的方法。文章详细讲解了如何利用escape()函数来编码Cookie值，以解决特殊字符及中文乱码的问题，并提供了设置过期时间的实用代码。

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

前后端完全分离的是目前web开发的大趋势，包括现下流行的前端框架的应用vue,angular，在不同页面跳转时，前端需要对用户登录状态进行判断，拿到用户的id，除了Ajax从服务器端获取数据外，对cookie的操作亦必不可少。

设置cookie
每个cookie都是一个名/值对，可以把下面这样一个字符串赋值给document.cookie：
document.cookie="userId=666";
如果要一次存储多个名/值对，可以使用分号加空格（; ）隔开，例如：

document.cookie="userId=666; userName=steve";

在cookie的名或值中不能使用分号（;）、逗号（,）、等号（=）以及空格。

保存的值是不确定的解决方案：用escape()函数进行编码，它能将一些特殊符号使用十六进制表示，例如空格将会编码为“20%”，从而可以存储于cookie值中，而且使用此种方案还可以避免中文乱码的出现。

例如：

document.cookie="str="+escape("I love javascript");

相当于： document.cookie="str=I%20love%20javascript";

当使用escape()编码后，在取出值以后需要使用unescape()进行解码才能得到原来的cookie值。

首先设置两个看看：

document.cookie = "userId=666";

document.cookie = "userName=steve";

var myCookie = document.cookie；

console.log(myCookie)

封装的cookie操作：

//toGMTString() 方法可根据格林威治时间 (GMT) 把 Date 对象转换为字符串，并返回结果。

//不赞成使用此方法：请使用 toUTCString() 取而代之。

function getCookie(name) {

var arr, reg = new RegExp("(^| )" + name + "=([^;]*)(;|$)");

if (arr = document.cookie.match(reg))

return unescape(arr[2]);

else {

return null;

}

function delCookie(name) {

var exp = new Date();

exp.setTime(exp.getTime() - 1);

var cval = getCookie(name);

if (cval != null) document.cookie = name + "=" + cval + ";expires=" + exp.toGMTString();

}

//设定自定义过期时间，程序代码

function setCookie(name, value, time) {

var strsec = getsec(time);

var exp = new Date();

exp.setTime(exp.getTime() + strsec * 1);

document.cookie = name + "=" + escape(value) + ";expires=" + exp.toGMTString();

}

function getsec(str) {

var str1 = str.substring(1, str.length) * 1;

var str2 = str.substring(0, 1);

if (str2 == "s") {

return str1 * 1000;

} else if (str2 == "h") {

return str1 * 60 * 60 * 1000;

} else if (str2 == "d") {

return str1 * 24 * 60 * 60 * 1000;

}

//有设定过期时间的使用：

//s20是代表20秒

//h是指小时，如12小时则是：h12

//d是天数，30天则：d30

//以下是测试代码：

setCookie("name", "mark", "s5");

console.log(myCookie);

setTimeout(function(){

delCookie("userName");

console.log(myCookie);

}, 7000 )；

//==============================整理一下，项目应用

(function() {

   var myCookie = {};
    myCookie.getCookie = function(name) {
        var arr, reg = new RegExp("(^| )" + name + "=([^;]*)(;|$)");
        if (arr = document.cookie.match(reg))
            return unescape(arr[2]);
        else
            return null;
    };

    myCookie.setCookie = function(name, value, time) {
        var strsec = getsec(time);
        var exp = new Date();
        exp.setTime(exp.getTime() + strsec * 1);
        document.cookie = name + "=" + escape(value) + ";expires=" + exp.toGMTString();
    };

myCookie.delCookie = function(name) {

var exp = new Date();

exp.setTime(exp.getTime() - 1);

var cval = myCookie.getCookie(name);

if (cval != null) document.cookie = name + "=" + cval + ";expires=" + exp.toGMTString();

};

window.myCookie = myCookie;

})(window.myCookie || {});

//初始cookie数据

document.cookie = "userId=666";

document.cookie = "userName=stevejobs";

myCookie.setCookie("name", "helloword", "s5");