第7章 用Cookie在客户端保存.ppt

第7章用Cookie在客户端保存信息 前面的章节从各个方面讲述了JavaScript的基础知识 从本章开始 将进入JavaScript针对web页面控制的部分 在制作网页的时候 常常需要使用表单和用户交互 而有时表单项目很多 用户填写了很久的时间 却因为意外 超时 误操作 等原因离开了该页面 再次回到表单页面时不得不重填所有的项目 这会给用户非常难以忍受的体验 那么一个理想的解决方案就是将用户的表达内容保存在本地 当页面载入时重载这些数据即可 7 1示例 用Cookie实现可以记住内容的表单 代码就是一个可以记住用户输入内容的表单 代码说明 7 2什么是Cookie Cookie 来自于英文 原意是 小甜饼 维基百科上的定义是 Cookie 有时也用其复数形式Cookies 指某些网站为了辨别用户身份而储存在用户本地终端上的数据 简单来说 Cookie就是服务器暂存放在浏览者电脑里的资料 好让服务器用来辨认其计算机 在浏览网站的时候 Web服务器会先送一小小资料放在访问者的计算机上 这段资料就是Cookie 当下次用户再访问同一个网站 Web服务器会先看看有没有其上次留下的Cookie资料 有的话 就会依据Cookie里的内容来判断使用者 送出特定的网页内容 Cookie看上去很复杂 那么其存在的价值是什么 为什么Web服务器不可以直接识别用户的电脑 要理解这些 必须先理解HTTP协议 7 2 1HTTP协议简介 用户在浏览网页的时候 浏览器的地址栏里输入的网站地址叫做统一资源定位符 URL UniformResourceLocator 就像每家每户都有一个门牌地址一样 每个网页也都有一个Internet地址 这个地址就是URL 浏览器通过超文本传输协议 HTTP 将Web服务器上站点的网页代码提取出来 并翻译成漂亮的网页 因此在认识HTTP协议之前 有必要先弄清楚URL的组成 例如 7 2 2Cookie存在的意义 正是由于HTTP协议有着非连接和无状态的特性 使得服务器并不能够区分出每次访问者之间的不同 比如用户A和用户B先后请求一个页面 服务器并不能判断出这两次请求是来自于不同的用户 还是来自于同一个用户 那么在实际的网络分布式应用中 客户身份的确认就成为一个很大的困扰 为了解决这个问题 人们在HTTP协议的基础上扩展出Cookie这个有力的工具 Cookie是一小段文本信息 被保存在客户端 每次浏览器访问服务器的时候 会自动的提交这段信息给服务器 服务器上的可执行程序 ASP PHP或者其他的程序 会获得这段信息 并且根据该信息进行相应的处理 7 2 3Cookie的优点和限制 Cookie协助HTTP协议 使得客户端和服务器之间的通信有了 状态 给用户和网站带来了很多的好处 举例来说 Cookie可以实现很多非常实用的应用 1 Cookie能使站点跟踪特定访问者的访问次数 最后访问时间和访问者进入站点的路径 2 Cookie能告诉在线广告商广告被点击的次数 从而可以更精确的投放广告 3 Cookie有效期限未到时 Cookie能使用户在不键入密码和用户名的情况下进入曾经浏览过的一些站点 4 Cookie能帮助站点统计用户个人资料以实现各种各样的个性化服务 7 3把输入框的内容保存在客户端 使用Cookie 虽然大多数情况下 Cookie都是由服务器端的应用程序 如ASP PHP和Perl等 操作和处理的 但JavaScript也提供了对Cookie的操作控制机制 7 3 1Cookie的保存和读取 在JavaScript的文档对象模型 DOM 中 Cookie对象是从属于文档对象 window document 的子对象 其表现行为类似于一个字符串对象 如前面所说 Cookie保存的是文本信息 因此JavaScript中常将字符串或数值型变量的内容保存于其中 将信息保存在Cookie中的语法很简单 即直接将字符串赋值给该对象 window document cookie 需要保存的信息 window document cookie 关键字 值 获取Cookie对象中保存的信息也很简单 可以直接将该对象作为字符串处理 例如 alert document cookie 7 3 2字符串的编码 在字符串的实际使用中 常常会遇到对其编码的限制 比如Cookie中不允许需要保存的字符串中有分号 出现 有些操作系统 在解释中文的字符串时常常出现乱码的现象 这些都需要程序员想办法避免储存数据中出现非英文字母 非数字的字符 JavaScript提供了内置的编码和解码函数 用来将非英文的字符编码或解码 编码函数为 escape 使用的语法为 codedString escape originalString 其作用为 将参数字符串 originalString 中的特殊字符 绝大多数的非英文字母 非数字的字符 替换为 加上该字符unicode编码的两位十六进制字符 或 u 加上该字符unicode编码的四位十六进制字符 视该字符的编码而定 函数 unescape 与 escape 相反 用于将 escape 编码后的字符串解码还原为原始的字符串 其语法为 originalString unescape codedString 7 4Cookie的有效期 域和路径 Cookie作为网站保存在客户端电脑上的小段文本信息 不可能永远的存在下去 其有着一定的生存周期 当过期后 浏览器会自动的删除该Cookie Cookie还有着域和路径的属性 用来标识不同的Cookie 浏览器在访问网页的时候 会自动根据网页的URL决定所需发送的Cookie 这些Cookie的属性不可以直接访问 只能在设置某一Cookie的时候设置 7 4 1Cookie的有效期和清除 Cookie的有效期在不设置的情况下 当用户关闭浏览器时即被删除 设置有效期后 浏览器会自动识别Cookie的状态是否过期 JavaScript中 设置Cookie的有效期很简单 只需要在设置Cookie的时候 在需保存的值后用分号 隔开 加上形如 expires 过期日期字符串 的字段就可以了 这也是为什么在Cookie所保存的信息字符中不可以有分号 的原因 系统需要保留该字符来分隔信息主体和附加的有效期等内容 过期日期字符串 可以为多种形式 都可以被浏览器自动的理解 例如下面的语法都是可以的 document cookie 姓名 妞妞 expires Mon 31Dec200717 41 11UTC document cookie 姓名 成头 expires 2008年1月1日1 42 12 document cookie 姓名 青青 expires 2008 1 11 42 12 7 4 2用Cookie实现记事贴 利用Cookie的有效期可以实现很多有趣的创意 代码7 3 htm是一个简单的记事贴效果 修改程序中多行文本框的内容 修改后的内容会被自动保存下来 并在下次打开的时候自动载入 其效果类似于代码7 1 htm的自动保存 区别在于使用了Cookie的有效期属性后 即使页面关闭 Cookie的内容也会一直存在 代码7 3 htm中 使用了Date对象 通过 dt setYear dt getYear 2 dt toUTCString 语句 使该Cookie的过期日期为当前时间的两年之后 7 4 3Cookie的域和路径及Cookie欺骗 Cookie有着域的属性 浏览器和服务器通信时 仅将所访问主机对应的域的Cookie发送给该主机 服务器在通知浏览器设置Cookie的时候 浏览器自动的将该Cookie保存在该服务器的域名下 从而避免出现Cookie泄漏 将某一网站的Cookie发送给另一个网站的错误 譬如 当用户打开 和 的时候 document cookie 具有着不同的内容 如图所示 7 5小结 由于网页的访问基于HTTP协议 而该协议有着非连接和无状态的特点 因此鉴别区分不同的访问者就成为Web应用的一个难题