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 相关文章推荐
JavaScript中的Window窗口对象
Jan 16 Javascript
javascript 火狐(firefox)不显示本地图片问题解决
Jul 05 Javascript
javascript trim函数在IE下不能用的解决方法
Sep 12 Javascript
jQuery中:visible选择器用法实例
Dec 30 Javascript
Bootstrap学习系列之使用 Bootstrap Typeahead 组件实现百度下拉效果
Jul 07 Javascript
利用纯js + transition动画实现移动端web轮播图详解
Sep 10 Javascript
Angular 项目实现国际化的方法
Jan 08 Javascript
浅谈Vue内置component组件的应用场景
Mar 27 Javascript
jquery获取img的src值实例介绍
Jan 16 jQuery
详解如何给React-Router添加路由页面切换时的过渡动画
Apr 25 Javascript
小程序封装wx.request请求并创建接口管理文件的实现
Apr 29 Javascript
JS用最简单的方法实现四舍五入
Aug 27 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接入(第三方登录)QQ登录 OAuth2.0 过程中遇到的坑
2017/10/13 PHP
PHP PDOStatement::fetch讲解
2019/01/31 PHP
详解PHP PDO简单教程
2019/05/28 PHP
gearman管理工具GearmanManager的安装与php使用方法示例
2020/02/27 PHP
PHP 范围解析操作符(::)用法分析【访问静态成员和类常量】
2020/04/14 PHP
在IE上直接编辑网页内容的js代码(IE地址栏js)
2009/04/27 Javascript
JavaScript 学习历程和心得分享
2010/12/12 Javascript
JAVASCRIPT模式窗口中下载文件无法接收iframe的流
2013/10/11 Javascript
一个简单的全屏图片上下打开显示网页效果示例
2014/07/08 Javascript
使表格的标题列可左右拉伸jquery插件封装
2014/11/24 Javascript
jQuery实现网页顶部固定导航效果代码
2015/12/24 Javascript
基于JQuery的$.ajax方法进行异步请求导致页面闪烁的解决办法
2016/05/10 Javascript
深入理解JavaScript内置函数
2016/06/03 Javascript
网页爬虫之cookie自动获取及过期自动更新的实现方法
2018/03/06 Javascript
vue项目中实现缓存的最佳方案详解
2019/07/11 Javascript
vue+element 实现商城主题开发的示例代码
2020/03/26 Javascript
原生JS实现pc端轮播图效果
2020/12/21 Javascript
python实现探测socket和web服务示例
2014/03/28 Python
python进阶教程之词典、字典、dict
2014/08/29 Python
python网络编程之数据传输UDP实例分析
2015/05/20 Python
简单了解Python下用于监视文件系统的pyinotify包
2015/11/13 Python
Python中列表和元组的使用方法和区别详解
2020/12/30 Python
详解django中自定义标签和过滤器
2017/07/03 Python
python实现随机梯度下降(SGD)
2020/03/24 Python
如何用Python来理一理红楼梦里的那些关系
2019/08/14 Python
win7下 python3.6 安装opencv 和 opencv-contrib-python解决 cv2.xfeatures2d.SIFT_create() 的问题
2019/10/24 Python
python的Jenkins接口调用方式
2020/05/12 Python
纯css3无js实现的Android Logo(有简单动画)
2013/01/21 HTML / CSS
俄罗斯香水在线商店:AromaCode
2019/12/04 全球购物
2014年3.15团委活动总结
2014/03/16 职场文书
亲子阅读的活动方案
2014/08/15 职场文书
保证书格式
2015/01/16 职场文书
期末复习计划
2015/01/19 职场文书
创业计划书之香辣虾火锅
2019/09/23 职场文书
Python实现8种常用抽样方法
2021/06/27 Python
Ubuntu Server 安装Tomcat并配置systemctl
2022/04/28 Servers