封装Cookie

最新推荐文章于 2024-06-16 13:16:08 发布

李先坤

最新推荐文章于 2024-06-16 13:16:08 发布

阅读量47

点赞数

文章标签：前端 javascript

本文链接：https://blog.csdn.net/weixin_43391261/article/details/127111117

版权

1、cookie概念：
将数据保存在客户端【浏览器】的一门会话技术.

2、特点：
1. cookie存储数据在客户端浏览器。数据存储在服务器端，安全等级高。数据cookie存储在浏览器端，安全等级低，容易被篡改，但是访问速度快

2. 浏览器对于单个cookie的大小有限制(4kb)同一个域名下的总cooki e数量也有限制(20个)

3、作用：
1. cookie- 般用于存出少量的不太敏感的数据
2. 在不登录的情况下，服务器对客户端的身份识别

封装三个函数

setCookie()——创建Cookie
getCookie()——获取Cookie
removeCookie()——删除Cookie

代码如下：

// setCookie 创建cookie
// key:键 val：值 time：时间（在这里设置的为几天后）
function setCookie(key, val, time) {
    // 操作  存值
    var date = new Date();
    date.setDate(date.getDate() + time);
    document.cookie = `${key}=${val};expires=${date}`;
}

//getCookie 获取cookie
// key
function getCookie(key) {
    var arr = document.cookie.split('; ');
    for (var item of arr) {
        var newArry = item.split('=');
        if (newArry[0] == key) {
            return newArry[1];
        }
    }
}

// removeCookie 删除cookie
function removeCookie(key) {
    //调用当前设置的cookie，将时间改为 -1
    this.setCookie(key, '', -1);
}

// 清空cookie
function clearCookie() {
    var clearArry = document.cookie.split('; ');
    for (var item of clearArry) {
        var newArry = item.split('=');
        this.setCookie(newArry[0], '', -1);
    }
}

测试：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

</body>

</html>
<script src="./myCookie.js"></script>
<script>
    setCookie('name', '张三');
    setCookie('age', 12, 1);
    var age_ = getCookie('age');
    console.log(age_);
    removeCookie('name');
    clearCookie();
</script>