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 相关文章推荐
jQuery 操作下拉列表框实现代码
Feb 22 Javascript
浅析ajax请求json数据并用js解析(示例分析)
Jul 13 Javascript
SeaJS入门教程系列之使用SeaJS(二)
Mar 03 Javascript
原生JavaScript生成GUID的实现示例
Sep 05 Javascript
AngularJS语法详解(续)
Jan 23 Javascript
Bootstrap实现响应式导航栏效果
Dec 28 Javascript
JS调用某段SQL语句的方法
Oct 20 Javascript
jQuery实现导航高亮的方法【附demo源码下载】
Nov 09 Javascript
JavaScript实现拖拽元素对齐到网格(每次移动固定距离)
Nov 30 Javascript
js实现单张图片平移切换效果
Oct 11 Javascript
Element-ui自定义table表头、修改列标题样式、添加tooltip、:render-header使用
Apr 11 Javascript
Angular8 简单表单验证的实现示例
Jun 03 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
PHP生成自定义长度随机字符串的函数分享
2014/05/04 PHP
安装ImageMagick出现error while loading shared libraries的解决方法
2014/09/23 PHP
php实现异步数据调用的方法
2015/12/24 PHP
解析PHP之提取多维数组指定列的方法
2017/01/03 PHP
Laravel利用gulp如何构建前端资源详解
2018/06/03 PHP
用javascript操作xml
2006/11/04 Javascript
用js实现上传图片前的预览(TX的面试题)
2007/08/14 Javascript
jQuery 位置插件
2008/12/25 Javascript
点击button获取text内容并改变样式的js实现
2014/09/09 Javascript
javascript 实现 原路返回
2015/01/21 Javascript
全面解析DOM操作和jQuery实现选项移动操作代码分享
2016/06/07 Javascript
如何编写jquery插件
2017/03/29 jQuery
JavaScript中Object基础内部方法图
2018/02/05 Javascript
webstorm添加*.vue文件支持
2018/05/08 Javascript
Angularjs中的$apply及优化使用详解
2018/07/02 Javascript
JS二级菜单不同实现方法分析【4种方法】
2018/12/21 Javascript
js继承的这6种方式!(上)
2019/04/23 Javascript
Electron-vue开发的客户端支付收款工具的实现
2019/05/24 Javascript
webpack打包html里面img后src为“[object Module]”问题
2019/12/22 Javascript
[26:40]DOTA2上海特级锦标赛A组资格赛#1 Secret VS MVP.Phx第一局
2016/02/25 DOTA
[01:33]DOTA2上海特级锦标赛 LIQUID战队完整宣传片
2016/03/16 DOTA
python实现最大优先队列
2019/08/29 Python
pytorch多GPU并行运算的实现
2019/09/27 Python
神经网络训练采用gpu设置的方式
2021/03/03 Python
方太官方网上商城:销售方太抽油烟机、燃气灶、消毒柜等
2017/01/17 全球购物
小橄榄树:Le Petit Olivier
2018/04/23 全球购物
在线购买澳大利亚设计师手拿包和奢华晚装手袋:Olga Berg
2019/03/20 全球购物
俄罗斯宠物用品网上商店:ZooMag
2019/12/12 全球购物
波兰品牌鞋履在线商店:Eastend.pl
2020/01/11 全球购物
主办会计岗位职责
2014/03/13 职场文书
党员领导干部廉洁从政承诺书
2014/03/27 职场文书
物业公司的岗位任命书
2014/06/06 职场文书
高中班级口号
2014/06/09 职场文书
2014党员民主评议个人总结
2014/09/10 职场文书
公司会议开幕词
2015/01/29 职场文书
关于vue中如何监听数组变化
2021/04/28 Vue.js