JavaScript入门篇之Cookie的应用

  最近看着人事系统的代码,还真是头疼。。为了尽快上手,看懂点东西,便快马加鞭了。看到前台用到了cookie,正好JS也学到了这个地方,这样就介绍一下Cookie的应用。

一、Cookie是什么

  Cookie 是存储于访问者的计算机中的变量。每当同一台计算机通过浏览器请求某个页面时,就会发送这个 cookie。你可以使用 JavaScript 来创建和取回 cookie 的值。Cookie是由服务器端生成,发送给User-Agent(一般是浏览器),浏览器会将Cookie的key/value保存到某个目录下的文本文件内,下次请求同一网站时就发送该Cookie给服务器。

  比如说,当你第一次访问淘宝时,要输入你的用户名和密码,这时用户信息会存储在你的浏览器的文本文件中,当你退出后内容就会存在硬盘中,下一次发生会话时,就读入到RAM中。

二、Cookie干什么

  随着web越来越复杂,开发者急切的需要能够本地化存储的脚本功能。Cookie的意图就是在本地的客户端的磁盘上以很小的文件形式保存数据。

三、Cookie局限性

 (1)每个特定的域名下最多产生10个cookie。

 (2)cookie的最大大约是4096字节(4k),为了更好的兼容性,一般不能超过4095字节。

 (3)cookie存储在客户端的文本文件,所以特别重要和敏感的数据是不建议保存在cookie中的。这里是考虑安全性的问题。

四、Cookie如何工作

 (1)客户端通过浏览器发送报文给服务器,请求连接。

 (2)服务器端收到要求,根据客户端的要求建立一个Set-Cookies Header。

 (3)服务器端通过建立Response Header去返回给客户端。

 (4)客户端收到报文,解析,获取cookie,存在本机内存。

Cookie有几个重要的属性,Cookie中有一个Expires(有效期)属性,这个属性决定了Cookie的保存时间,也可以重新设定来改变它,若不设置该属性,那么Cookie只在浏览网页期间有效,关闭浏览器后,这些Cookie会自动消失。还有path属性,可以限制访问Cookie的目录,domain用来限制域名访问,secure指定必须通过Https加密通信访问。对服务器起作用的是name和value属性。

五、创建,读取,删除Cookie

  下面的例子中,分别写了四个函数创建,读取,删除,检测cookie的值。

<script lang="javasctript" type="text/javascript">
        function getCookie(c_name) {  //读取cookie值
            if (document.cookie.length > 0) {
                c_start = document.cookie.indexOf(c_name + "=")
                if (c_start != -1) {
                    c_start = c_start + c_name.length + 1
                    c_end = document.cookie.indexOf(";", c_start)
                    if (c_end == -1) c_end = document.cookie.length
                    return unescape(document.cookie.substring(c_start, c_end))
                }
            }
            return ""
        }

        function setCookie(c_name, value, expiredays) {//设置cookie值
            var exdate = new Date()
            exdate.setDate(exdate.getDate() + expiredays)
            document.cookie = c_name + "=" + escape(value) +
            ((expiredays == null) ? "" : ";expires=" + exdate.toGMTString())
        }

        function delCookie(name)//删除cookie
        {
            var exp = new Date();
            exp.setTime(exp.getTime() - 1);
            var cval = getCookie(name);
            if (cval != null) document.cookie = name + "=" + cval + ";expires=" + exp.toGMTString();
        }

        function checkCookie() {  //检测cookie值
            username = getCookie('username')
            if (username != null && username != "")
            { alert('Welcome again ' + username + '!') }
            else
            {
                username = prompt('Please enter your name:', "")
                if (username != null && username != "") {
                    setCookie('username', username, 365)
                }
            }
        }

        setCookie("zhouzhou", 2, 3);
        checkCookie('zhouzhou');
        delCookie('zhouzhou');
        alert(getCookie('zhouzhou'));

    </script>

六、小结

  本文简单的从几个角度介绍了:定义,作用,缺点,使用,流程。这让我联想到,Cookie通过在客户端记录信息确定用户身份,Session通过在服务器端记录信息确定用户身份。什么时候使用Cookie,什么时候使用Session,还是需要仔细研究的。

时间: 2024-10-28 22:47:32

JavaScript入门篇之Cookie的应用的相关文章

JavaScript 入门篇01- 标签位置

在网页中,我们可以将JavaScript代码放在html文件中任何位置,但一般放在head或body标签里面. 一般来说,<script>元素放在哪里与其的功能作用是紧密相关的,在这里讨论2种情况: 1.放在<head>里 将<script>元素放在head中是为了让浏览器在一开始就读取,<script>元素会在整个网页最开始解析时就加载执行,其优先次序仅次于<title>元素. 然后依次向下解析渲染. 应用:比如进行页面显示初始化的js必须放在

JavaScript入门篇之文档对象模型

前言: 文档对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展置标语言的标准编程接口.它是一种与平台和语言无关的应用程序接口(API),它可以动态地访问程序和脚本,更新其内容.结构和www文档的风格(目前,HTMl和XML文档是通过说明部分定义的). 文档对象模型提供了一种访问和修改HTML文档内容的方法.DOM是万维网联盟(W3C)定义的一种标准.大部分的互联网浏览器以各种形式实现了DOM并且获得了不同程度的成功.和其他标准,特别是那些与web编程

JavaScript入门篇

一.你知道,为什么JavaScript非常值得我们学习吗? 1. 所有主流浏览器都支持JavaScript. 2. 目前,全世界大部分网页都使用JavaScript. 3. 它可以让网页呈现各种动态效果. 4. 做为一个Web开发师,如果你想提供漂亮的网页.令用户满意的上网体验,JavaScript是必不可少的工具. 二.易学性 1.学习环境无外不在,只要有文本编辑器,就能编写JavaScript程序. 2.我们可以用简单命令,完成一些基本操作. 三.从哪开始学习呢? 学习JavaScript的

JavaScript入门篇 第二天

提问(prompt 消息对话框) prompt弹出消息对话框,通常用于询问一些需要与用户交互的信息.弹出消息对话框(包含一个确定按钮.取消按钮与一个文本输入框). 语法: prompt(str1, str2); 参数说明: str1: 要显示在消息对话框中的文本,不可修改 str2:文本框中的内容,可以修改 返回值: 1. 点击确定按钮,文本框中的内容将作为函数返回值 2. 点击取消按钮,将返回null 看看下面代码: var myname=prompt("请输入你的姓名:"); if

JavaScript入门篇 - 常用互动方法

为什么学习JavaScript 一.你知道,为什么JavaScript非常值得我们学习吗? 1. 所有主流浏览器都支持JavaScript. 2. 目前,全世界大部分网页都使用JavaScript. 3. 它可以让网页呈现各种动态效果. 二.易学性 1.学习环境无外不在,只要有文本编辑器,就能编写JavaScript程序. 2.我们可以用简单命令,完成一些基本操作. 三.从哪开始学习呢? 学习JavaScript的起点就是处理网页,所以我们先学习基础语法和如何使用DOM进行简单操作. 如何插入J

JavaScript入门篇QA总结

Q1:JS可以放在哪个位置?A1:1.放在<head>标签中,用<script type="text/javascript"></script>来标志这是一段JS代码:2.放在外部文件中,文件后缀名为.js,用<script src="xx.js" />将外部文件引进HTML:3.写在HTML的<body>标签中,通过<script type="text/javascript"&g

JavaScript入门篇 第一天

使用<script>标签在HTML网页中插入JavaScript代码.注意, <script>标签要成对出现,并把JavaScript代码写在<script></script>之间.<script type="text/javascript">表示在<script></script>之间的是文本类型(text),javascript是为了告诉浏览器里面的文本是属于JavaScript语言. #JS——引

JavaScript入门篇之浏览器对象模型

前言: 真正的JavaScript是由三部分组成,ECMAScript.DOM.BOM,如下图所示.本文将主要介绍其中的浏览器对象模型. BOM(Browser Object Mode) 是指浏览器对象模型,是用于描述这种对象与对象之间层次关系的模型,浏览器对象模型提供了独立于内容的.可以与浏览器窗口进行互动的对象结构.BOM由多个对象组成,其中代表浏览器窗口的Window对象是BOM的顶层对象,其他对象都是该对象的子对象. 一.window对象 BOM可以用来访问和操作浏览器窗口的浏览器,开发

JavaScript入门篇之新生代JSON遇XML

信息化到处被提及的特点,就是拥有大量的数据交互的格式.前阵子学习了XML的结构化数据,在学习javascript的时候又接触到了JSON,都作为数据的存储格式,二者之间有什么区别和联系呢,查了很多的资料,小编在这里就相当于写个总结了. 十年前,XML是主要的数据交换格式.它的出现,尤如一股清新的空气,以及令人惊喜的SGML(标准通用标记语言),是一个巨大的进步.它使人们能够做到以前想都不敢想的事情,本质上讲,XML就是一个文本文件,在解析上,在普通的web应用领域,开发者经常为XML的解析伤脑筋