cookie的获取、设置和删除

106 阅读 0 评论 70 点赞

我是靠谱客的博主安静猎豹，这篇文章主要介绍cookie的获取、设置和删除，现在分享给大家，希望可以做个参考。

cookie是什么？

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

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

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

如何获取cookie

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// 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]);
            }
        }

封装进函数中

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14

//获取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

复制代码

1
2
3
4
5
6
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

复制代码

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