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 相关文章推荐
滚动条变色 隐藏滚动条与双击网页自动滚屏显示代码
Dec 28 Javascript
动感效果的TAB选项卡jquery 插件
Jul 09 Javascript
jquery判断复选框是否被选中的方法
Oct 16 Javascript
无缝滚动的简单实现代码(推荐)
Jun 07 Javascript
BootStrap Tooltip插件源码解析
Dec 27 Javascript
JS排序算法之冒泡排序,选择排序与插入排序实例分析
Dec 13 Javascript
Angular2整合其他插件的方法
Jan 20 Javascript
Vue.js 中取得后台原生HTML字符串 原样显示问题的解决方法
Jun 10 Javascript
解决Vue中 父子传值 数据丢失问题
Aug 27 Javascript
微信小程序左右滚动公告栏效果代码实例
Sep 16 Javascript
Bootstrap实现前端登录页面带验证码功能完整示例
Mar 26 Javascript
js+canvas实现转盘效果(两个版本)
Sep 13 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 PDO中文乱码解决办法
2009/07/20 PHP
ThinkPHP采用模块和操作分析
2011/04/18 PHP
小谈php正则提取图片地址
2014/03/27 PHP
跟我学Laravel之安装Laravel
2014/10/15 PHP
php中常量DIRECTORY_SEPARATOR用法深入分析
2014/11/14 PHP
自制PHP框架之模型与数据库
2017/05/07 PHP
让textarea自动调整大小的js代码
2011/04/12 Javascript
eclipse如何忽略js文件报错(附图)
2013/10/30 Javascript
鼠标移到div,浮层显示明细,弹出层与div的上边距左边距重合(示例代码)
2013/12/14 Javascript
createTextRange()的使用示例含文本框选中部分文字内容
2014/02/24 Javascript
轻松创建nodejs服务器(8):非阻塞是如何实现的
2014/12/18 NodeJs
全面了解javascript三元运算符
2016/06/27 Javascript
AngularJS 单元测试(一)详解
2016/09/21 Javascript
node跨域请求方法小结
2017/08/25 Javascript
微信小程序wx.request实现后台数据交互功能分析
2017/11/25 Javascript
vue.js删除列表中的一行
2018/06/30 Javascript
Vue实现远程获取路由与页面刷新导致404错误的解决
2019/01/31 Javascript
JavaScript遍历数组的方法代码实例
2020/01/14 Javascript
如何通过Proxy实现JSBridge模块化封装
2020/10/22 Javascript
[43:32]Winstrike vs VGJ.S 2018国际邀请赛淘汰赛BO3 第一场 8.23
2018/08/24 DOTA
Python使用迭代器捕获Generator返回值的方法
2017/04/05 Python
Python编程判断一个正整数是否为素数的方法
2017/04/14 Python
Python利用operator模块实现对象的多级排序详解
2017/05/09 Python
Pipenv一键搭建python虚拟环境的方法
2018/05/22 Python
pandas 读取各种格式文件的方法
2018/06/22 Python
python调用java的jar包方法
2018/12/15 Python
python PyAutoGUI 模拟鼠标键盘操作和截屏功能
2019/08/04 Python
python 调用pyautogui 实时获取鼠标的位置、移动鼠标的方法
2019/08/27 Python
Django中提示消息messages的设置方式
2019/11/15 Python
python 实现屏幕录制示例
2019/12/23 Python
在PyCharm中实现添加快捷模块
2020/02/12 Python
Python多进程multiprocessing、进程池用法实例分析
2020/03/24 Python
html5 利用canvas实现超级玛丽简单动画
2013/09/06 HTML / CSS
煤矿隐患排查制度
2015/08/05 职场文书
Windows10下安装MySQL8
2021/04/06 MySQL
Win11 vmware不兼容怎么办?Win11与VMware虚拟机不兼容的解决方法
2023/01/09 数码科技