JS操作cookie(读/写/删)

约定不等于承诺〃 2022-08-12 01:02 139阅读 0赞

![SouthEast][]

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>operate cookie demo</title>
        <script>
    
        // 写cookie
        function setCookie(cookieName,cookieValue) { 
            var days = 30; 
            var expires = new Date(); 
            expires.setTime(expires.getTime() + days * 24 * 60 * 60 * 1000 ); 
            document.cookie = cookieName + "="+ escape(cookieValue) + ";expires=" + expires.toGMTString(); 
        } 
    
        // 读取cookies 
        function getCookie(cookieName) { 
            var arr,reg = new RegExp("(^| )"+cookieName+"=([^;]*)(;|$)");
            if(arr=document.cookie.match(reg)) {
                return unescape(arr[2]); 
            }
            return ""; 
        } 
    
        // 删除cookie (单个)
        function delCookie(cookieName){  
            var exp = new Date();  //当前时间  
            exp.setTime(exp.getTime() - 1);  
            var cval=getCookie(cookieName);  
            if( cval != null ) {
                document.cookie= cookieName + "="+cval+";expires="+exp.toGMTString();
            }  
        }  
        //删除cookies (多个)
        function delCookies(){ 
            for (var i = 0; i < arguments.length; i++) {
                delCookie(arguments[i].id);
            }
        } 
    
        // 将复选框的状态写入 cookie
        function write2Cookie() {
            // 删除所有cookie, 测试时用
            delCookies("viewPrint", "wholePrint", "continuity");
    
            setCookie("viewPrint",   viewPrint.checked ? "checked" : "");
            setCookie("wholePrint", wholePrint.checked ? "checked" : "");
            setCookie("continuity", continuity.checked ? "checked" : "");
        }
    
    
        var viewPrint ;
        var wholePrint;
        var continuity;
        window.onload = function() {
    
            viewPrint  = document.getElementById("viewPrint");
            wholePrint = document.getElementById("wholePrint");
            continuity = document.getElementById("continuity");
    
             viewPrint.checked = getCookie("viewPrint");
            wholePrint.checked = getCookie("wholePrint");
            continuity.checked = getCookie("continuity");
        }
        </script>
    </head>
    <body>
    
        <input type="checkbox" id="viewPrint"  οnclick="write2Cookie()">viewPrint 
        <input type="checkbox" id="wholePrint" οnclick="write2Cookie()">wholePrint
        <input type="checkbox" id="continuity" οnclick="write2Cookie()">continuity
    
    <style>
        .notice {width: 600px; font-size: 13px; font-family:arial; line-height: 24px; margin-top: 20px;}
        .warning-border{border:solid 1px rgb(247, 171, 0);}
        .warning-bgcolor{background-color:rgb(255, 250, 177);}
    </style>
    <div class="notice warning-border warning-bgcolor">
    <pre>
        注意:
            1. 基于webkit内核的浏览器(谷歌,360极速模式), 读写cookie不能在本地进行.
               即, 必须把该文件放在服务器上访问, 才能进行读写cookie操作.
            2. IE可以在本地操作cookie
    </pre>
    </div>
    </body>
    </html>

[SouthEast]: /images/20220810/98c42f2b3ec44a6a8e13085f4d35e477.png