cookie的获取、设置和删除

最新推荐文章于 2024-08-19 17:12:17 发布

TERMINUSL

最新推荐文章于 2024-08-19 17:12:17 发布

阅读量3.1k

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/TERMINUSL/article/details/124575665

版权

本文介绍了JavaScript如何操作Cookie，包括如何获取所有cookie、封装获取特定cookie的函数、设置带有有效期限的cookie以及如何通过改变有效期来删除cookie。内容详细且实用，适合前端开发者参考。

摘要由CSDN通过智能技术生成

cookie是什么？

cookie是存储于用户计算机中的变量。

当一个用户通过计算机中的浏览器，访问服务器上边的某个页面，JavaScript会创建或者读取cookie。

cookie是document文档对象上边的一个属性。

如何获取cookie

// document.cookie获取所有的cookie，得到的是一个字符串
console.log(document.cookie);
console.log(typeof document.cookie);  //string

 var str = document.cookie    //获取所有的cookie，得到的是一个字符串
 var arr = str.split("; "); //注意：分号后面有一个空格 
        for (let i = 0; i < arr.length; i++) {
            var arr2 = arr[i].split("=")
            if (arr2[0] == "username") {
                console.log(arr2[1]);
            }
        }

封装进函数中


//获取cookie方法，封装一个方法getCookies(),传入一个属性参数，可以获取对应的属性值
 function getCookies(name) {
       var str = document.cookie    //获取所有的cookie，得到的是一个字符串
       var arr = str.split("; "); //注意：分号后面有一个空格 
            for (let i = 0; i < arr.length; i++) {
                var arr2 = arr[i].split("=")
                if (arr2[0] == name) {
                    return arr2[1]
                }
            }
        }
        console.log(getCookies("username")); 
        console.log(getCookies("age"));

（2）设置cookie

let oDate = new Date(); //获取电脑当前时间
console.log(oDate.getDate()); //获取日期
oDate.setDate(oDate.getDate() + 10)  //设置日期为10天之后

console.log(oDate); //显示日期为10天之后
document.cookie = "sex=nan;expires=" + oDate  //设置一条cookie并且设置有效期

(3)删除cookie

 // 删除cookie
 // cookie有效期到了之后就自动消失了
 // 将有效期设置成昨天--该cookie就会自动删除
 function removeCookies(name) {
     setCookies(name, "value可以任意写", -1)
  }
  removeCookies("username")
  removeCookies("age")
  removeCookies("sex")