JS对Cookie的应用--JavaScript实例集锦（初学）

Posted 2020-10-25 筱风能动浪，岸树不遮山

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JS对Cookie的应用--JavaScript实例集锦（初学）相关的知识，希望对你有一定的参考价值。

一个网站上的cookie信息可以实现下次自动登录，记录你的历史等等

可以在火狐浏览器查看本地代码的cookie信息：

打开火狐浏览器--点击右键--查看页面信息--安全--查看cookie

<!DOCTYPE html>
<html>
<head>
    <title>Cookie</title>
</head>
<script type="text/javascript">
/*    var oDate=new Date();
    oDate.setDate(oDate.getDate()+30);
     document.cookie="user=blue;expires=";
    // document.cookie="pass=123";*/
    //alert(document.cookie);
    function setCookie(name,value,iDay){
        var oDate=new Date();
        oDate.setDate(oDate.getDate()+iDay);
        document.cookie=name+\'=\'+value+\';expires=\'+oDate;
    }
    function getCookie(name){
        var arr=document.cookie.split(\'; \');
        for(var i=0;i<arr.length;i++){
            var arr2=arr[i].split(\'=\');
            if(arr2[0]==name){
                return arr2[1];
            }
        }
        return \'\';
    }
    function removeCookie(name){
        setCookie(name,\'1\',-1);
    }
    alert(getCookie(\'username\'));
    // removeCookie(\'username\');
    // alert(getCookie(\'username\'));
    setCookie(\'username\',\'abc\',30);
     setCookie(\'password\',\'123456\',300);
</script>
<body>

</body>
</html>

2.利用cookie记录鼠标拖动div的位置坐标

<!DOCTYPE html>
<html>
<head>
    <title>drag Div</title>
    <style type="text/css">
        #div1{width: 100px;height: 100px;background: red;position: absolute;}
    </style>
    <script type="text/javascript">
    function setCookie(name,value,iDay){
        var oDate=new Date();
        oDate.setDate(oDate.getDate()+iDay);
        document.cookie=name+\'=\'+value+\';expires=\'+oDate;
    }
    function getCookie(name){
        var arr=document.cookie.split(\'; \');
        for(var i=0;i<arr.length;i++){
            var arr2=arr[i].split(\'=\');
            if(arr2[0]==name){
                return arr2[1];
            }
        }
        return \'\';
    }
    function removeCookie(name){
        setCookie(name,\'1\',-1);
    }
        window.onload=function(){
            var oDiv=document.getElementById(\'div1\');
            var disX=0;
            var disY=0;
            var x=getCookie(\'x\');
            var y=getCookie(\'y\');
            if(x){
            oDiv.style.left=x+\'px\';
            oDiv.style.top=y+\'px\';
        }

            oDiv.onmousedown=function(ev){
                var oEvent=ev||event;
                disX=oEvent.clientX-oDiv.offsetLeft;
                disY=oEvent.clientY-oDiv.offsetTop;
                document.onmousemove=function(ev){
                var oEvent=ev||event;
                var l=oEvent.clientX-disX;
                var t=oEvent.clientY-disY;
                if (l<0)
                 {l=0;}
                else if(l>document.documentElement.clientWidth-oDiv.offsetWidth){
                    l=document.documentElement.clientWidth-oDiv.offsetWidth;
                }
                    if (t<0)
                 {t=0;}
                else if(t>document.documentElement.clientHeight-oDiv.offsetHeight){
                    l=document.documentElement.clientHeight-oDiv.offsetHeight;
                }

                oDiv.style.left=l+\'px\';
                oDiv.style.top=t+\'px\';
            };
            document.onmouseup=function(){
                document.onmousemove=null;
                document.onmouseup=null;
                setCookie(\'x\',oDiv.offsetLeft,5);
                setCookie(\'y\',oDiv.offsetTop,5);
            }
        };

        return false;
        
    };
    </script>
</head>
<body>
    <div id="div1"></div>
</body>
</html>

3.利用cookie记住用户名

<!DOCTYPE html>
<html>
<head>
    <title>Remember Username</title>
    <script type="text/javascript">
    function setCookie(name,value,iDay){
        var oDate=new Date();
        oDate.setDate(oDate.getDate()+iDay);
        document.cookie=name+\'=\'+value+\';expires=\'+oDate;
    }
    function getCookie(name){
        var arr=document.cookie.split(\'; \');
        for(var i=0;i<arr.length;i++){
            var arr2=arr[i].split(\'=\');
            if(arr2[0]==name){
                return arr2[1];
            }
        }
        return \'\';
    }
    function removeCookie(name){
        setCookie(name,\'1\',-1);
    }
    window.onload=function(){
            var oForm=document.getElementById(\'form1\');
            var oUser=document.getElementsByTagName(\'user\')[0];
            var oBtnClear=document.getElementsByTagName(\'a\')[0];
            oForm.onsubmit=function(){
                setCookie(\'user\',oUser.value,30);
            };
            oUser.value=getCookie(\'user\');
            alert(oUser.value);
            oBtnClear.onclick=function(){
                removeCookie(\'user\');
                oUser.value=\'\';
            }
        }
    </script>
</head>
<body>
    <form id="form1" action="https://www.baidu.com">
        Username:<input type="text" name="user" />
        <br/>
        <br/>
        Password:<input type="password" name="pass"/><br/>
        <input type="submit" value="Login"/><br/>
        <a href="javascript:;">Forgot your username</a>
    </form>
</body>
</html>

以上是关于JS对Cookie的应用--JavaScript实例集锦（初学）的主要内容，如果未能解决你的问题，请参考以下文章

JS对Cookie的读写删除

通过JS对浏览器的Cookie的部分操作，查询设置以及删除

javascript cookie util #js #cookie

JavaScript-Tool：jquery.cookie.js

javascript 创建集删除javascript js cookie