JavaScript中Cookies的相关使用教程


Posted in Javascript onJune 04, 2015

 Cookies是什么 ?

Web浏览器和服务器使用HTTP协议进行通信,并且HTTP是一种无状态协议。但对于一个商业网站它需要保持不同的页面间的会话信息。例如在完成多页后,一个用户注册结束。但是,如何保持所有网页用户的会话信息。

在许多情况下,使用Cookie来记忆和跟踪的喜好,采购,佣金,并要求更好的访问体验或网站的统计数据等信息的最有效的方法。
它是如何工作的 ?

服务器发送一些数据到访问者的浏览器以cookie的形式。该浏览器可以接受cookie。如果是这样,它是为访问者存储在硬盘驱动器上的一个纯文本的记录。现在,当访问者到达您的网站其他页面,浏览器发送相同cookie到服务器进行检索。一旦检索到,服务器知道/记得刚才发生了什么存储。

Cookies有5个可变长度字段的纯文本数据记录:

  •     Expires : cookie将过期的日期。如果这是空白的,那么就是当访问者退出浏览器cookie将到期。
  •     Domain : 网站的域名。
  •     Path : 路径设置 cookie 目录或网页。如果想要从任何目录或页面,那么cookie 是空的。
  •     Secure : 如果该字段包含“安全”二字,那么cookie仅可检索到一个安全的服务器。如果该字段为空,没有限制存在。
  •     Name=Value : Cookie设置在键和值对的形式来获取。

的Cookie最初设计用于CGI编程和cookies的数据是在Web浏览器和Web服务器之间自动传输的,所以在服务器上的CGI脚本可以读取和写入存储在客户端上的cookie的值。

JavaScript的也可以操作使用文档对象的cookie属性。 JavaScript可以读取,创建,修改和删除适用于当前网页的cookie或Cookies。
储存Cookies:

创建一个cookie的最简单的方法是一个字符串值分配到document.cookie对象,它是这样的:
语法

document.cookie = "key1=value1;key2=value2;expires=date";

在这里,expires属性选项。如果提供这个属性有一个有效的日期或时间,那么cookie将在给定的日期或时间满期,而后cookies的值将无法访问到。

注意:Cookie的值可能不包括分号,逗号或空白。出于这个原因,可能需要使用JavaScript 的 escape()函数将其存储的值在cookie之前进行编码。如果这样做,当读取cookie的值时也必须使用相应的unescape()函数。
 读取Cookies:

读取cookie和写入一样简单,因为 document.cookieobject 的值是cookie。所以每当要访问cookie,可以使用这个字符串。

该字符串 document.cookie将继续由分号,其中name是一个cookie的名称,值是它的字符串值分隔的名称=值对的列表。
 设置Cookies的过期日期:

可以通过设置的到期日期和保存cookie中的失效日期延长超出当前浏览器会话cookie中的寿命。这可以通过设置expires属性的日期和时间来完成。
例子:

下面的例子演示了如何设置cookie1个月后过期:

<html>
<head>
<script type="text/javascript">
<!--
function WriteCookie()
{
  var now = new Date();
  now.setMonth( now.getMonth() + 1 ); 
  cookievalue = escape(document.myform.customer.value) + ";"
  document.cookie="name=" + cookievalue;
  document.cookie = "expires=" + now.toUTCString() + ";"
  alert("Setting Cookies : " + "name=" + cookievalue );
}
//-->
</script>
</head>
<body>
<form name="formname" action="">
Enter name: <input type="text" name="customer"/>
<input type="button" value="Set Cookie" onclick="WriteCookie()"/>
</form>
</body>
</html>

删除Cookie:

有时如果想删除一个cookie,以便后续尝试读取cookie返回什么。要做到这一点,你只需要在到期日设置在过去的某个时间。
例子:

下面的例子演示了如何通过设置有效期限一个月以前删除cookie:

<html>
<head>
<script type="text/javascript">
<!--
function WriteCookie()
{
  var now = new Date();
  now.setMonth( now.getMonth() - 1 ); 
  cookievalue = escape(document.myform.customer.value) + ";"
  document.cookie="name=" + cookievalue;
  document.cookie = "expires=" + now.toUTCString() + ";"
  alert("Setting Cookies : " + "name=" + cookievalue );
}
//-->
</script>
</head>
<body>
<form name="formname" action="">
Enter name: <input type="text" name="customer"/>
<input type="button" value="Set Cookie" onclick="WriteCookie()"/>
</form>
</body>
</html>

注:不设置日期,可以使用setTime()函数看到新值。

Javascript 相关文章推荐
IE6 弹出Iframe层中的文本框“经常”无法获得输入焦点
Dec 27 Javascript
不同浏览器对回车提交表单的处理办法
Feb 13 Javascript
在其他地方你学不到的jQuery小贴士和技巧(欢迎收藏)
Jan 20 Javascript
JQuery用户名校验的具体实现
Mar 18 Javascript
js添加事件的通用方法推荐
May 15 Javascript
Vue项目全局配置微信分享思路详解
May 04 Javascript
JavaScript实用代码小技巧
Aug 23 Javascript
vue插件实现v-model功能
Sep 10 Javascript
Vue实现滑动拼图验证码功能
Sep 15 Javascript
JavaScript中ES6规范中let和const的用法和区别
Aug 06 Javascript
VUE中setTimeout和setInterval自动销毁案例
Sep 07 Javascript
Vue封装全局过滤器Filters的步骤
Sep 16 Javascript
javascript组合使用构造函数模式和原型模式实例
Jun 04 #Javascript
浅析JavaScript中的事件机制
Jun 04 #Javascript
JavaScript中指定函数名称的相关方法
Jun 04 #Javascript
JavaScript中Function()函数的使用教程
Jun 04 #Javascript
JavaScript中的函数嵌套使用
Jun 04 #Javascript
JavaScript函数使用的基本教程
Jun 04 #Javascript
浅谈利用JavaScript进行的DDoS攻击原理与防御
Jun 04 #Javascript
You might like
德劲1107的电路分析与打磨
2021/03/02 无线电
PHP-Java-Bridge使用笔记
2014/09/22 PHP
php中文验证码实现方法
2015/06/18 PHP
tp5框架基于Ajax实现列表无刷新排序功能示例
2020/02/10 PHP
Js之软键盘实现(js源码)
2007/01/30 Javascript
Prototype Number对象 学习
2009/07/19 Javascript
jQuery toggle()设置CSS样式
2009/11/05 Javascript
初窥JQuery(一)jquery选择符 必备知识点
2010/11/25 Javascript
js中parseFloat(参数1,参数2)定义和用法及注意事项
2013/01/27 Javascript
Javascript实现商品秒杀倒计时(时间与服务器时间同步)
2015/09/16 Javascript
AngularJS Bootstrap详细介绍及实例代码
2016/07/28 Javascript
基于JavaScript实现点击页面任何位置返回
2016/08/31 Javascript
详解Jquery EasyUI tree 的异步加载(遍历指定文件夹,根据文件夹内的文件生成tree)
2017/02/11 Javascript
jQuery 判断元素整理汇总
2017/02/28 Javascript
JavaScript 程序错误Cannot use 'in' operator to search的解决方法
2017/07/10 Javascript
bootstrap基本配置_动力节点Java学院整理
2017/07/14 Javascript
JS路由跳转的简单实现代码
2017/09/21 Javascript
koa+mongoose实现简单增删改查接口的示例代码
2019/05/13 Javascript
微信小程序实现折线图的示例代码
2019/06/07 Javascript
详解Angular Karma测试的持续集成实践
2019/11/15 Javascript
浅析JavaScript 函数柯里化
2020/09/08 Javascript
[02:35]DOTA2英雄基础教程 末日使者
2013/12/04 DOTA
python 剪切移动文件的实现代码
2018/08/02 Python
Python pymongo模块常用操作分析
2018/09/01 Python
python 自动重连wifi windows的方法
2018/12/18 Python
python 采用paramiko 远程执行命令及报错解决
2019/10/21 Python
解决jupyter notebook打不开无反应 浏览器未启动的问题
2020/04/10 Python
Python与C/C++的相互调用案例
2021/03/04 Python
Monnier Frères美国官网:法国知名奢侈品网站
2016/11/22 全球购物
三分钟英语演讲稿
2014/04/24 职场文书
革命英雄事迹演讲稿
2014/09/13 职场文书
公安交警中队队长个人对照检查材料思想汇报
2014/10/05 职场文书
2015年招生工作总结
2015/05/04 职场文书
2015仓库保管员年终工作总结
2015/05/13 职场文书
2015年度个人教学工作总结
2015/05/20 职场文书
基于Python实现西西成语接龙小助手
2022/08/05 Golang