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. HDU-4879-ZCC loves march(map+set+并查集)

    Description On a m*m land stationed n troops, numbered from 1 to n. The i-th troop's position can be ...

  2. oracle2

    为什么选择oracle--性能优越 概述:目前主流数据库包括 微软: sql server和access 瑞典MySql: AB公司mysql ibm公司: db2(处理海量) 美国Sybase公司: ...

  3. LAMP环境部署总结

    linux+apche+mysql+php 此次用到的工具有:/etc/init.d/iptables , selinux, useradd, yum,chkconfig,sshd,visudo,cr ...

  4. oracle用户管理入门

    1.创建一个新用户(普通) create user 用户名 identified by 密码 示例,创建一个名叫小明的用户,密码为xm 2.以管理员的身份给普通用户修改密码(当普通用户忘掉自己的密码时 ...

  5. Linux下搭建Oracle11g RAC(2)----配置DNS服务器，确认SCAN IP可以被解析

    从Oracle 11gR2开始,引入SCAN(Single Client Access Name) IP的概念,相当于在客户端和数据库之间增加一层虚拟的网络服务层,即是SCAN IP和SCAP IP  ...

  6. webapi 接口规则

    [HttpPost] [AuthorizeFilter] public HttpResponseMessage DeleteStudentInfo([FromBody] object value) { ...

  7. JavaScript+DOM编程艺术【读书笔记】

    第四章笔记: 如何让一个a标签不跳转: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www. ...

  8. PHP 给前面或者后面添加0补位

    相信大家一定遇到这样的问题,因为PHP是弱类型的,所以进行排序的时候,有时候很胃疼 所以这里就需要将位数进行统一后进行处理 一般都是将末尾添加0进行补位 方法1 :  str_pad — 使用另一个字 ...

  9. wp 修改 提高youtu 速度

    resolve = 后添加 |.googlevideo.com ,并修改 crlf_rules crlf_rules = /^https?:\/\/[^\/]+\.c\.youtube\.com\// ...

  10. Object-C内存管理基础

    如果你通过手工alloc的方式分配内存实例化创建一个对象,之后你需要release这个对象,同理你也不能手工释放(release)一个能自动释放(autoreleased)的对象,因为这个样子会使你的 ...