cookie的存储和调用

最新推荐文章于 2024-05-30 11:27:58 发布

kong..

最新推荐文章于 2024-05-30 11:27:58 发布

阅读量82

点赞数

文章标签： javascript 开发语言 html5

本文链接：https://blog.csdn.net/qq_47456365/article/details/132499416

版权

1.cookie封装方法

// 创建一个新的Cookie
function createCookie(name, value, daysToExpire) {
    var expires = "";
    if (daysToExpire) {
        var date = new Date();
        date.setTime(date.getTime() + (daysToExpire * 24 * 60 * 60 * 1000));
        expires = "; expires=" + date.toUTCString();
    }
    document.cookie = name + "=" + value + expires + "; path=/";
}
// 读取 Cookie 的值
function getCookieValue(name) {
    var nameEQ = name + "=";
    var cookies = document.cookie.split(';');
    for (var i = 0; i < cookies.length; i++) {
        var cookie = cookies[i];
        while (cookie.charAt(0) == ' ') {
            cookie = cookie.substring(1, cookie.length);
        }
        if (cookie.indexOf(nameEQ) == 0) {
            return cookie.substring(nameEQ.length, cookie.length);
        }
    }
    return null;
}
// 删除 Cookie
function deleteCookie(name) {
    createCookie(name, "", -1);
}

2.html代码演示

<!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>
<style>
    .document_textBorder{
        display: flex;
        border-top: 1px solid #f5f5f5;
    }
    .document_textBorder:last-child{
        border-bottom: 1px solid #f5f5f5;
    }
    .document_textBorder_left{
        width: 30%;
        padding: 20px;
        display: inline-block;
        border-right: 1px solid #f5f5f5;
    }
    .document_textBorder_right{
        width: 70%;
        padding: 20px;
        display: inline-block;
    }

    .document_textTop{
        padding: 40px 20px;
    }
    .document_textTop_text:not(:first-child){
        padding-top: 15px;
    }
</style>
<body>
    <div class="button">
        Cookie 前点击
    </div>
    <div class="document_textTop">

    </div>
    <div class="document_text">

    </div>
    <script>
        // 创建一个新的Cookie
        function createCookie(name, value, daysToExpire) {
            var expires = "";
            if (daysToExpire) {
                var date = new Date();
                date.setTime(date.getTime() + (daysToExpire * 24 * 60 * 60 * 1000));
                expires = "; expires=" + date.toUTCString();
            }
            document.cookie = name + "=" + value + expires + "; path=/";
        }
        // 读取 Cookie 的值
        function getCookieValue(name) {
            var nameEQ = name + "=";
            var cookies = document.cookie.split(';');
            for (var i = 0; i < cookies.length; i++) {
                var cookie = cookies[i];
                while (cookie.charAt(0) == ' ') {
                    cookie = cookie.substring(1, cookie.length);
                }
                if (cookie.indexOf(nameEQ) == 0) {
                    return cookie.substring(nameEQ.length, cookie.length);
                }
            }
            return null;
        }
        // 删除 Cookie
        function deleteCookie(name) {
            createCookie(name, "", -1);
        }

        var isHidden = true; // 初始状态为隐藏

        // 示例用法
        createCookie("user_id", "123", 30);
        createCookie("session_token", "abcdef123456", 30);

        // 数组
        var myArray = [1, 2, 3, "apple", "banana"];
        createCookie("my_array_cookie", JSON.stringify(myArray), 30);

        document.querySelector('.button').onclick=function(){
            if(isHidden){
                
                document.querySelector('.button').innerHTML='点击啦'
                let myTime =setInterval(() => {
                    document.querySelector('.button').innerHTML='再次点击隐藏';
                    clearInterval(myTime)
                }, 3000);
              

                var userId = getCookieValue("user_id");
                var sessionToken = getCookieValue("session_token");

                document.getElementsByClassName('document_textTop')[0].innerHTML=`<div class="document_textTop_text">User ID: ${userId};</div>`
                document.getElementsByClassName('document_textTop')[0].innerHTML+=`<div class="document_textTop_text">Session Token: ${sessionToken};</div>`
                
                console.log("User ID: " + userId);
                console.log("Session Token: " + sessionToken);


                var myArrayText = getCookieValue("my_array_cookie");
                console.log(myArrayText,"aaa");

                // 将存储在 Cookie 中的字符串解析为数组
                var parsedArray = JSON.parse(myArrayText);

                parsedArray.forEach((item, index) => {
                    console.log("第"+index+"个:"+item);
                    // 渲染到页面
                    let myText = ``
                    
                    myText= `
                    <div class="document_textBorder">
                        <span class="document_textBorder_left">
                            第${index}个:   
                        </span>   
                        <span class="document_textBorder_right">
                            ${item}    
                        </span>    
                    <div>
                    `
                    document.getElementsByClassName('document_text')[0].innerHTML+=myText;
            
                });
                isHidden = false;
            }else{
                document.querySelector('.button').innerHTML='点击啦'
                let myTime =setInterval(() => {
                    document.querySelector('.button').innerHTML='再次点击显示';
                    clearInterval(myTime)
                }, 3000);
                // 如果当前是显示状态，单击按钮后隐藏内容
                document.querySelector('.document_textTop').innerHTML = '';
                document.querySelector('.document_text').innerHTML = '';
                isHidden = true; // 切换状态为隐藏
            }
            
        }

        // 删除 Cookie
        deleteCookie("session_token");
    </script>
</body>
</html>