什么是cookie？简单来说，cookie就是网站服务器存放在我们计算机上的一小段（一般大小不超过4KB）用来识别和记录用户的个人信息的文本。HTTP协议是一种没有“状态”的传输协议，也就是说，服务器无法识别任意两次访问是否有同一个来源，这样就不能判断用户信息，从而也就不能针对特定用户做出个性化设置。为了解决这个问题，cookie技术应运而生。

cookie具体是怎么运行的呢？举个栗子，当我们在网页上登录了一次邮箱后，下一次再登录，会发现我们的用户名（可能还有密码）已经出现在输入框中，不用再次手动输入了，这其中就是cookie在起作用。当第一次登录网站时，网站的服务器端可执行程序（php、asp等等）或客户端脚本（本文主角：JavaScript）就会把我们的某些操作（比如个性化设置）记录下来，存放在cookie中。当下一次访问到该页面时，浏览器在向服务器发送HTTP请求之前，会先在本地查找这个地址是不是有cookie存在，如果存在，就会在把这个cookie信息加入到请求的Header中。服务器在接收到请求时，会先解析这个cookie，把cookie中的信息解释后融入到将要发送的HTML页面中，然后才把网页文件发给客户端浏览器。

一个完整的cookie包含以下几个字段（每个字段都由一个名值对组成）：

document.cookie = "name=value;expires=dateString;domain=www.example.com;path=/pathString/;secure";
  1. name：顾名思义，就是cookie的名称。
  2. value：cookie的值，它和name一样都要经过URI编码。
  3. expires：过期时间，过了expires指定的时间，这个cookie将被删除，如果不指定，那么它在浏览器关闭时就会被删除。
  4. domain：域，指该cookie在什么域名生效，也就是访问网站时应该把这个cookie发送到哪个地址。
  5. path：domain下的路径，如果指定了路径，那么该cookie只有在当前路径下才能访问，在domain域的其他路径下不能访问。
  6. secure：安全标志，声明了secure的cookie只能在SSL连接（就是https://打头的链接）时才会被发送到服务器。

那么在JavaScript中怎么操作cookie呢？JavaScript中读取和设置cookie都通过document.cookie这个属性。下面分别通过代码示例来说明怎么设置、读取以及删除cookie。

一、设置cookie

        /*

        下面的代码说明如何通过JavaScript设置cookie

        */

        function setCookie(name,value,days,path,domain,secure){

            //从参数读取要设置的cookie的name和value，并进行URI编码

            var cookieText = encodeURIComponent(name) + "=" + encodeURIComponent(value);

            //设置cookie的过期时间，根据外部输入的天数（days）来设置

            var exp = new Date();

            exp.setTime(exp.getTime() + days*24*60*60*1000);

                cookieText += ";expires=" + exp.toGMTString();

            //如果参数中path、domain、secure不为空就依次在cookieText中缀上这些字段

            if(path){

                cookieText += ";path=" + path;

            }

            if(domain){

                cookieText += ";domain=" + domain;

            }

            if(secure){

                cookieText += ";secure";

            }

            //把页面的cookie设置为cookieText的值

            document.cookie = cookieText;

        }

二、读取cookie

        /*

        下面的代码说明如何通过JavaScript读取页面cookie。

        */

        function getCookie(str){

            //从参数str读入要获取的cookie

            var name = encodeURIComponent(str) + "=";

            //在document.cookie字符串中读取该cookie的位置

            var start = document.cookie.indexOf(name);

            //如果没有读到，返回false

            if(start == -1){

                return false;

            }

            /*

            由于每个cookie字段都是以“;”结尾的（除了最后一个），

            所以我们从start位置开始查找“;”第一次出现的位置，这个

            位置就是本条cookie的结束位置

            */

            var end = document.cookie.indexOf(";",start);

            if(end == -1){

                end = document.cookie.length;

            }

            /*

            start + name.length刚好到达这条cookie中“=”的位置，

            因此后面直到end的位置都是value值字符串

            */

            var value = decodeURIComponent(document.cookie.substring(start + name.length,end));

            return value;

        }

三、删除cookie

        /*

        下面的代码说明如何通过JavaScript删除cookie

        删除cookie很简单，当把cookie的过期时间设置为当前时间以前，

        它立即被删除。这里用到了前面的setCookie函数

        */

        function removeCookie(name,path,domain,secure){

            return setCookie(name,"",new Date(0),path,domain,secure);

        }

这就是用JavaScript来操作cookie的整个过程。接下来，我们用JavaScript完成一个小小的示例。这个示例将在用户每次打开页面时提示用户上次打开本页面的时间。（注意：请选择Firefox浏览器测试本示例，因为Google chrome浏览器不支持在file:///协议下设置cookie，如果你一定要用chrome浏览器，那必须搭建php+mysql+apache的localhost环境）为了实现这个功能，我们设置一个名为lasttime的cookie。在每次用户将要关闭时，调用window的onbeforeunload事件，先把lasttime这条cookie删除（因为这里记录着上次设置的登录时间），然后再设置当前时间为lasttime的值。当用户下一次打开页面时，我们从document.cookie中读取lasttime的值，再运用DOM方法，把信息显示到屏幕上。下面是具体代码：

<!DOCTYPE html>

<html lang="zh-CN">

<head>

    <meta charset="utf-8">

    <title>cookie</title>

</head>

<body>

    <script>

        window.onload = function(){

        //页面加载后，读取名为lasttime的cookie，并输出到屏幕上

            if (document.cookie){

                var welcome = getCookie("lasttime");

                document.write("last time visit: " + welcome);

            }

        }

        window.onbeforeunload = function(){

        //页面关闭之前，先删除上次的值，再设置新值

            if (document.cookie){

                removeCookie("lasttime","",0);

            }

            var now = new Date();

            var v = now.toLocaleString();

            setCookie("lasttime",v,30);

        }

    </script>

</body>

</html>

运行结果如下：

参考文献：

1.高宏等.《JavaScript从入门到精通》.机械工业出版社

2.Nicholas C. Zakas.《JavaScript高级程序设计》（中文第三版）.人民邮电出版社

浅谈JavaScript中的cookie的更多相关文章

  1. 浅谈JavaScript中的闭包

    浅谈JavaScript中的闭包 在JavaScript中,闭包是指这样一个函数:它有权访问另一个函数作用域中的变量. 创建一个闭包的常用的方式:在一个函数内部创建另一个函数. 比如: functio ...

  2. 浅谈JavaScript中的null和undefined

    浅谈JavaScript中的null和undefined null null是JavaScript中的关键字,表示一个特殊值,常用来描述"空值". 对null进行typeof类型运 ...

  3. 浅谈JavaScript中的正则表达式（适用初学者观看）

    浅谈JavaScript中的正则表达式 1.什么是正则表达式(RegExp)? 官方定义: 正则表达式是一种特殊的字符串模式,用于匹配一组字符串,就好比用模具做产品,而正则就是这个模具,定义一种规则去 ...

  4. 浅谈JavaScript中的内存管理

    一门语言的内存存储方式是我们学习他必须要了解的,接下来让我浅谈一下自己对他的认识. 首先说,JavaScript中的变量包含两种两种类型: 1)值类型或基本类型:undefined.null.numb ...

  5. 浅谈JavaScript中闭包

    引言 闭包可以说是JavaScript中最有特色的一个地方,很好的理解闭包是更深层次的学习JavaScript的基础.这篇文章我们就来简单的谈下JavaScript下的闭包. 闭包是什么? 闭包是什么 ...

  6. 浅谈JavaScript中的继承

    引言 在JavaScript中,实现继承的主要方式是通过原型链技术.这一篇文章我们就通过介绍JavaScript中实现继承的几种方式来慢慢领会JavaScript中继承实现的点点滴滴. 原型链介绍 原 ...

  7. 浅谈JavaScript中继承的实现

    谈到js中的面向对象编程,都有一个共同点,选择原型属性还是构造函数,两者各有利弊,而就片面的从js的对象创建以及继承的实现两个方面来说,官方所推荐的是两个相结合,各尽其责,各取其长,在前面的例子中,我 ...

  8. 【总结】浅谈JavaScript中的接口

    一.什么是接口 接口是面向对象JavaScript程序员的工具箱中最有用的工具之一.在设计模式中提出的可重用的面向对象设计的原则之一就是“针对接口编程而不是实现编程”,即我们所说的面向接口编程,这个概 ...

  9. 浅谈JavaScript中的defer,async

    引言 开始重读<<JavaScript高级程序设计>>一书,看到关于JavaScript中关于defer.async的部分.网上查询了点资料,觉得蛮好的.现在总结下. defe ...

随机推荐

  1. Replacing Threads with Dispatch Queues

    Replacing Threads with Dispatch Queues To understand how you might replace threads with dispatch que ...

  2. 太坑了，mybatis注解一对多，id没了

    @Select("SELECT *, id nodes FROM QUESTION_PO WHERE ID=#{id}") @Results({ @Result(property ...

  3. 【Apache Kafka】二、Kafka安装及简单示例

    (一)Apache Kafka安装 1.安装环境与前提条件   安装环境:Ubuntu16.04   前提条件: ubuntu系统下安装好jdk 1.8以上版本,正确配置环境变量 ubuntu系统下安 ...

  4. Error: Registry key 'Software\JavaSoft\Java Runtime has value '1.8', but '1.7' is

    cmd下输入 java命令时出现该错误: Error: Registry key 'Software\JavaSoft\Java Runtimehas value '1.8', but '1.7' i ...

  5. Spring 注解注入的几种方式（转）

    平常的java开发中,程序员在某个类中需要依赖其它类的方法,则通常是new一个依赖类再调用类实例的方法,这种开发存在的问题是new的类实例不好统一管理,spring提出了依赖注入的思想,即依赖类不由程 ...

  6. Python - 模块(一)

    目录 Python - 模块(一) 模块的引用方式 常用模块 random(随机模块) os模块 sys 序列化模块 hashlib subprocess optparse struct Python ...

  7. 第一节：numpy之ndarray对象数据类型及属性

  8. JavaScript初步学习----基本使用，简单事件，修改样式，数据类型

    JavaScript基本使用 JavaScript原名叫livescript,是一门动态类型,弱类型基于原型的脚本语言   用于页面特效,前后交替,后台开发(node)   JavaScript写在s ...

  9. BUPT2017 springtraining(16) #4 ——基础数论

    题目在这里 A.手动打表找规律得组合数 n -= 2, m -= 2, ans = C(n, m) #include <bits/stdc++.h> using namespace std ...

  10. Spring MVC学习总结（9）——Spring MVC整合swagger自动生成api接口文档

    Swagger 号称:世界最流行的API框架,官网:http://swagger.io/,Swagger 是一个规范和完整的框架,用于生成.描述.调用和可视化 RESTful 风格的 Web 服务.总 ...