一个网站上的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. Web、Android等程序开发中src引入外部文件和资源的方法总结

    方法一:使用相对于当前文件(源文件)的相对路径 使用 ../ 对于这个例子来说 ../ 把路径带到了项目根目录的下一级目录 1 <script src="../static/js/wo ...

  2. MySQL配置和常用命令

    目录 数据库配置 常用操作 项目地址:https://github.com/aijisjtu/Bot-Battle graph LR A[配置数据源] --> B[建立连接] B --> ...

  3. #状压dp#JZOJ 3853 帮助Bsny

    题目 一共有\(n\)本书,混乱值是连续相同高度书本的段数. 可以取出\(k\)本书随意放回,问最小混乱值,高度\([25\sim 32]\) 分析 设\(f[i][j][k][mask]\)表示前\ ...

  4. std::thread 四：异步（async）

    *:如果 std::async 中传递参数 std::lunnch::deferred ,就需要等待调用 get() 或者 wait() 才会执行,并且代码非子线程运行,而是在主线程中执行 #incl ...

  5. Kubernetes 的 NameSpace 无法删除应该怎么办？

    概述 有时候我们操作不规范,或者删除的先后顺序有问题,或者某项关键服务没有启动,导致 Kubernetes 经常会出现无法删除 NameSpace 的情况.这种情况下我们应该怎么办? 规范删除流程 其 ...

  6. 堆结构（Heap）的基本实现【数据结构与算法—TypeScript 实现】

    笔记整理自 coderwhy 『TypeScript 高阶数据结构与算法』课程 概念 本质:一种特殊的树结构,由 完全二叉树 实现 多数情况为二叉堆 二叉堆:最大堆.最小堆 最大堆:堆上的每个节点都的 ...

  7. k8s之operator

    背景 数字经济的兴起推动了云计算.物联网.大数据行业的快速蓬勃发展,对数据中心提出了更高的要求,同时,用户对于数据库运维自动化的需求越来越高,数据库即服务的需求越来越强烈. 随着k8s的普及以及云原生 ...

  8. Mysql安装和远程登录--Centos7

    在Centos7中使用的包管理工具是yum,当然使用包管理工具安装也是最方便的. 本文操作内容需要在root用户下,否则有些步骤无法成功执行. 系统环境信息展示 安装 MySQL 提供的 RPM wg ...

  9. Android、iOS、jenkins全自动化打包

    主要流程思路[粗略讲处理思路,若遇到具体问题可留言交流]: 1.android的打包命令 2.ios的打包命令 3.jenkins的参数化构建 4.七牛的上传命令等 5.处理ipa的下载操作及ipa过 ...

  10. ES6---new Promise()使用方法

    2015年6月份, ES2015正式发布(也就是ES6,ES6是它的乳名),其中Promise被列为正式规范.作为ES6中最重要的特性之一,我们有必要掌握并理解透彻.本文将由浅到深,讲解Promise ...