zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    JVM系列六(自定义插入式注解器).
    JVM系列五(Javac 字节码编译器).
    2019 — 求不得,放不下
    Mybatis 条件判断单双引号解析问题
    JVM系列四(对象分配策略).
    JVM系列三(垃圾收集器).
    Spring MVC -- Spring Tool Suite和Maven(安装Tomcat、JDK)
    Spring MVC -- 单元测试和集成测试
    Spring MVC -- 下载文件
    Spring MVC -- 上传文件
  • 原文地址:https://www.cnblogs.com/cheryshi/p/8487773.html
Copyright © 2011-2022 走看看