cookie : 存储数据，当用户访问了某个网站（网页）的时候，我们就可以通过cookie来像访问者电脑上存储数据
1.不同的浏览器存放的cookie位置不一样，也是不能通用的
2.cookie的存储是以域名形式进行区分的
3.cookie的数据可以设置名字的
4.一个域名下存放的cookie的个数是有限制的，不同的浏览器存放的个数不一样
5.每个cookie存放的内容大小也是有限制的，不同的浏览器存放大小不一样
我们通过document.cookie来获取当前网站下的cookie的时候，得到的字符串形式的值，他包含了当前网站下所有的cookie。他会把所有的cookie通过一个分号+空格的形式串联起来
如果我们想长时间存放一个cookie。需要在设置这个cookie的时候同时给他设置一个过期的时间
cookie默认是临时存储的，当浏览器关闭进程的时候自动销毁

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>面试cookie</title>

     <style type="text/css">

         #div1{width: 150px;height: 150px;background: #0ff;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,'a',-1);

         }

         window.onload=function(){

             var oDiv=document.getElementById("div1");

             var disX=0;

             var disY=0;

             var moveX=0;

             var moveY=0;

             oDiv.onmousedown=function(ev){

                 removeCookie("left");

                 removeCookie("top");

                 var ev=ev||event;

                 disX=ev.clientX-oDiv.offsetLeft;

                 disY=ev.clientY-oDiv.offsetTop;

                 document.onmousemove=function(ev){

                     var ev=ev||event;

                     moveX=ev.clientX-disX;

                     moveY=ev.clientY-disY;

                     oDiv.style.left=moveX+"px";

                     oDiv.style.top=moveY+"px";

                 }

                 document.onmouseup=function(){

                     setCookie("left",moveX,30);

                     setCookie("top",moveY,14);

                     document.onmousemove=null;

                     document.onmouseup=null;

                 }

             }    

             oDiv.style.left=getCookie("left",moveX)+"px";

             oDiv.style.top=getCookie("top",moveY)+"px";

         }

     </script>

 </head>

 <body>

     <div id="div1"></div>

 </body>

 </html>

面试cookie的更多相关文章

  1. [oldboy-django][4python面试]cookie和session比较

    session定义(知乎网上) Session的数据不是储存在客户端上的,而是储存在服务器上的:而客户端使用Cookie储存一个服务器分配的客户端会话序号(Session ID),当客户端请求服务器时 ...

  2. 不惧面试：HTTP协议(3) - Cookie

    v博客前言 先交代下背景,写这个系列的原因是总结自己遇到的面试题以及可能遇到的题目,更重要的是,今年定的目标是掌握网络这一块的知识点,先是搞懂HTTP协议,然后是TCP/IP协议,再就是WCF如何运用 ...

  3. 一文带你看懂cookie，面试前端不用愁

    本文由云+社区发表 在前端面试中,有一个必问的问题:请你谈谈cookie和localStorage有什么区别啊? localStorage是H5中的一种浏览器本地存储方式,而实际上,cookie本身并 ...

  4. 看完这篇 Session、Cookie、Token，和面试官扯皮就没问题了

    Cookie 和 Session HTTP 协议是一种无状态协议,即每次服务端接收到客户端的请求时,都是一个全新的请求,服务器并不知道客户端的历史请求记录:Session 和 Cookie 的主要目的 ...

  5. 接口测试彻底弄懂Session、Cookie、Token的区别及联系hold住面试官--hold住了开3万，hold不住开3K！

    一.前言:接口测试之伤:cookie,session,token本是一家! cookie,session,token的区别早就已经成为测试同行的心病,各大论坛,各大博客,各大视频网站无不充斥着各种疑问 ...

  6. 先登陆面试再者Tabs标签导航，多次网络请求共享cookie，本地存储cookie

    1,index.ng.html: <head> <title>ionic todo example</title> </head> <body n ...

  7. Java面试14|Session与Cookie

    1.在分布式环境,管理Session通常使用下面三种方式: (1)Session Replication 方式管理 (即session复制) 将一台机器上的Session数据广播复制到集群中其余机器上 ...

  8. java面试记录一：跳表、判断二叉树相同、冒泡排序、cookie和session的区别、设计模式（单例、工厂、模板方法、原型、代理、策略）、抽象类与接口的区别

    1.什么是跳表? 跳表实际上就是多层链表 跳表可用在让链表的元素查询接近线性时间 代码结构及java实现参考博客园随笔 2.判断两棵二叉树是否相同?(结构相同,内容相同) 思路:(1)先定义树节点Tr ...

  9. 金九银十已到！Cookie 和 Session的这些知识你必须知道，面试必问！

    前言 会话:一次会话中包含多次请求和响应 注:一次会话表示浏览器第一次给服务器发送请求,会话建立,直到有一方断开为止 功能:在一次会话的多次请求间共享数据 方式: (1) 客户端会话技术:Cookie ...

随机推荐

  1. 我的第一个 Rails 站点：极简优雅的笔记工具－Raysnote

    出于公司开发需求,这个暑假我開始搞Ruby on Rails.在业余时间捣鼓了一个在线笔记应用:http://raysnote.com.这是一个极简而优雅的笔记站点(至少我个人这么觉得的). 笔记支持 ...

  2. Android时间互换代码

    收藏备用. http://www.oschina.net/code/snippet_575610_22694 /** * 获取现在时间 * * @return 返回时间类型 yyyy-MM-dd HH ...

  3. careercup-栈与队列 3.5

    3.5 实现一个MyQueue类,该类用两个栈来实现一个队列. 解答 队列是先进先出的数据结构(FIFO),栈是先进后出的数据结构(FILO), 用两个栈来实现队列的最简单方式是:进入队列则往第一个栈 ...

  4. Linux 精准获取进程pid--转

    如果想在脚本里只获取PID,那么可以用如下脚本.目前收集两种方法: 方法一 $ps x|grep xxx  |awk '{print $1}' e.g. ps x|grep java |awk '{p ...

  5. 照片浏览器软件-WTL开发的照片浏览器

    前段时间,为了准备情人节礼物,本人想了做一个照片浏览器送给女友,专门播放我俩的所有照片的一个程序软件,于是,就写了这么一个照片浏览器软件.本程序是基于WTL8.0开发的一个图片/照片浏览器,涉及到XM ...

  6. web服务构架

    以我的理解大流量电商网站,一般构架如下: CDN 负载均衡集群 < === >  缓存服务器集群 反向代理服务器集群 web服务器集群(日志采集) < === > 缓存系统集群 ...

  7. Base64的Java代码实现

    欢迎拍砖~ 在数据二进制和byte互相转换的地方方法写得有点挫,不知道有没有更好的方法~ 顺便复习了java的一些基础东西,如位操作,原码反码补码 可以在这篇blog里学习到详细的知识点:http:/ ...

  8. 多维数组遍历PHP

    原文出处 <?php /* * ------------------------------------------------- * Author : nowamagic * Url : ww ...

  9. OpenXML: Asp.net利用OpenXML 导出Excel.

    http://www.cnblogs.com/skyfei/archive/0001/01/01/Openxml.html

  10. oracle redo日志维护

    环境 OS:Red Hat Linux As 5 DB:10.2.0.1 1.添加日志组 alter database add logfile group 4 ('/u01/app/oracle/or ...