一个网站上的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实例集锦（初学）的更多相关文章

  1. JS封装cookie操作函数实例(设置、读取、删除)

    本文实例讲述了JS封装cookie操作函数.分享给大家供大家参考,具体如下: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 ...

  2. js获取cookie中存储的值

    最近看了试卷题目发现自己会的十分的匮乏, 第一题就把自己难住了,知道有这个东西,但是实际上没有操作过. ========================================= cookie ...

  3. JS设置cookie

    cookie 与 session 是网页开发中常用的信息存储方式.Cookie是在客户端开辟的一块可存储用户信息的地方:Session是在服务器内存中开辟的一块存储用户信息的地方. JavaScrip ...

  4. JS操作cookie以及本地存储（sessionStorage 和 localStorage ）

    JS操作cookie cookie的操作用两种方式 1.substring //创建cookie function setCookie(name,value,expires,path,domain,s ...

  5. JS使用cookie实现DIV提示框只显示一次的方法

    本文实例讲述了JS使用cookie实现DIV提示框只显示一次的方法.分享给大家供大家参考,具体如下: 这里运用JavaScript的cookie技术,控制网页上的提示DIV只显示一次,也就是当用户是第 ...

  6. 两种方法使用js读写cookie实现一个底部广告浮层效果

    下面一个案例实现了js实现一个页面浮层并且使用两种方法使用js读写cookie:来实现用户关闭广告的显示状态: 读者可以将下面代码复制到一个html文件试试效果:html的pre标签未两种js实现的方 ...

  7. 易懂 易上手的cookie 最简单明了 js中cookie的使用方法及教程

    今天项目中需要用到cookie 看到我的cookie不行了 大喊一声我曹 怎么可以这样 我就疯狂的在网上找 找啊 找 但是我感觉都太官方了   废话不说 看栗子 1.引入jQuery与jQuery.C ...

  8. 通过js对cookie的使用手册

    一般大多数人还是用引用JQuary API——jquery.cookie.js,来操作cookie.这是一种很不错的方式,我也支持这样的做法. 但是有时候我们只需要一种极为轻量级的代码来实现简单的功能 ...

  9. 运用JS设置cookie、读取cookie、删除cookie

    JavaScript是运行在客户端的脚本,因此一般是不能够设置Session的,因为Session是运行在服务器端的.而cookie是运行在客户端的,所以可以用JS来设置cookie. 假设有这样一种 ...

  10. JavaScript实例

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xht ...

随机推荐

  1. wordpress自建博客站，在页脚添加网站总运行时间

    wordpress自建博客站,在页脚添加网站总运行时间 笔者使用的主题是 GeneratePress 版本:3.1.3 <span id="momk" style=" ...

  2. Linux I/O函数

    pipe函数 pipe函数可用于创建一个管道,以实现进程间通信. #include<unistd.h> /* Create a one-way communication channel ...

  3. #线段树，矩阵乘法#LOJ 3264「ROIR 2020 Day 2」海报

    题目 分析 设\(dp[i][0/1/2/3]\)表示以\(i\)结尾1的长度为0/1/2/3的最大值, 那么 \[\begin{cases}dp[i][0]=\max\{dp[i-1][\dots] ...

  4. #背包#nssl 1488 上升子序列

    题目 给一个长度为\(n\)的数组\(a\).试将其划分为两个严格上升子序列,并使其长度差最小. 分析 当\(max([1,i])<min([i+1,n])\)时显然两个区间互不影响,把\(i\ ...

  5. #构造#洛谷 6470 [COCI2008-2009#6]CUSKIJA

    题目 给定一个长度为 \(n\) 的序列 \(a\),请将其重新排序, 新序列中任意相邻两个数之和都不能被 \(3\) 整除. 分析 分类讨论,如果只有3的倍数多于1个无解 没有 \(3k+1\) 或 ...

  6. 使用 OpenCV 进行文档矫正

    使用 OpenCV 进行文档矫正 本文只发布于博客园与pchar博客 std::vector<std::vector<cv::Point>> cvhelper::findCor ...

  7. HMS Core 3D精准室内定位技术，打造“店铺级”出行体验

    2022年4月28日,在华为折叠旗舰及全场景新品发布上,华为Mate Xs 2折叠屏手机搭载由HMS Core定位服务(Location Kit)提供的3D精准室内定位技术,为用户提供了"店 ...

  8. 前端使用 Konva 实现可视化设计器（3）

    github/gitee Star 终于有几个了! 从这章开始,难度算是(或者说细节较多)升级,是不是值得更多的 Star 呢?! 继续求 Star ,希望大家多多一键三连,十分感谢大家的支持~ 创作 ...

  9. nginx重新整理——————nginx 的网络模型[九]

    前言 简单介绍一下nginx的网络模型. 正文 网络拓扑图: 数据流: 网络传输大概是这样传输的. nginx 事件循环: 事件处理过程: 上面两张图什么意思呢? 其实就是说,nginx 是通过事件驱 ...

  10. sql 语句系列(两个日期之间)[八百章之第十七章]

    前言 进入了日期章了. 年月日加减法 分别对原有的日期进行加减法. sql server select DATEADD(DAY,-5,HIREDATE) as hd_mimus_5D, DATEADD ...