JavaScript Cookie使用案例

青旅半醒 2022-06-08 08:05 197阅读 0赞

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>cookie处理</title>
        <script type="text/javascript">
            //注：cookie 中key不允许重复，如果key重复那后面的key对应的值将覆盖原来的值，不设置过期时间则游览器关闭cookie就清除了，不同的游览器不能共享cookie
            //添加cookie
            function addCookie(name, value, timeOut) {
                //进行编码
                var name = encodeURIComponent(name);
                var value = encodeURIComponent(value);
                //拼接key 和 value
                var content = name + "=" + value;
                if (!timeOut) {
                    var date = new Date();
                    date.setDate(date.getDate() + 1);
    //                如果设置了cookie过期时间则添加过期时间,toGMTString() 为cookie所能识别的时间类型
                    content += "; expiress=" + date.toGMTString();
                }
    //            存储cookie
                document.cookie = content;
            }
            //修改cookie
            function setCookie(name, value, timeOut) {
                addCookie(name, value, timeOut);
            }
            //        根据key名称删除cookie
            function deleteCookie(name) {
                //删除cookie只需要设置cookie过期时间为当前时间之前的任意时间
                setCookie(name, "", -5);
            }
            //        根据key名称获取value值
            function getCookie(name) {
                var name = encodeURIComponent(name);
                name += "=";
                //得到cookie
                var cookie = document.cookie;
    //            获取cookie key出现的位置
                var number = cookie.indexOf(name);
                if (number < 0)return;
                var startIndex = name.length + number;
                var endIndex = cookie.indexOf(";", number);
                endIndex = endIndex < 0 ? cookie.length : endIndex;
    //            decodeURIComponent() 方法进行解码
                alert(decodeURIComponent(cookie.substring(startIndex, endIndex)));
    
            }
            //得到所有的cookie
            function getAllCookie() {
                var cookie = document.cookie;
                document.getElementById("content").innerHTML = decodeURIComponent(cookie);
    
            }
            //测试用例
            function saveCookie() {
                addCookie("姓名1", "李四", 1);
                addCookie("姓名2", "李四2", 1);
                addCookie("姓名3", "李四3", 1);
            }
        </script>
    </head>
    <body>
    <h1>cookie操作案例</h1>
    <button οnclick="saveCookie()">保存cookie</button>
    <button οnclick="setCookie('姓名1','张三',1)">修改cookie</button>
    <button οnclick="deleteCookie('姓名2')">删除cookie</button>
    <button οnclick="getCookie('姓名1')">得到cookie</button>
    <button οnclick="getAllCookie()">得到所有cookie</button>
    
    <div id="content"></div>
    </body>
    </html>