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 相关文章推荐
JS解密入门 最终变量劫持
Jun 25 Javascript
动态创建script标签实现跨域资源访问的方法介绍
Feb 28 Javascript
实例讲解Jquery中隐藏hide、显示show、切换toggle的用法
May 13 Javascript
JavaScript提升性能的常用技巧总结【经典】
Jun 20 Javascript
详解在AngularJS的controller外部直接获取$scope
Jun 02 Javascript
详解vue项目构建与实战
Jun 27 Javascript
React学习笔记之条件渲染(一)
Jul 02 Javascript
vuejs父子组件之间数据交互详解
Aug 09 Javascript
Vue登录主页动态背景短视频制作
Sep 21 Javascript
搭建vscode+vue环境的详细教程
Aug 31 Javascript
Selenium执行JavaScript脚本的方法示例
Dec 31 Javascript
JavaScript严格模式不支持八进制的问题讲解
Nov 07 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 常用函数库和一些实用小技巧
2009/01/01 PHP
PHP学习笔记之二
2011/01/17 PHP
php设计模式 Command(命令模式)
2011/06/26 PHP
让Json更懂中文(JSON_UNESCAPED_UNICODE)
2011/10/27 PHP
php给每个段落添加空格的方法
2015/03/20 PHP
php实现转换html格式为文本格式的方法
2016/05/16 PHP
jquery ajax提交表单数据的两种实现方法
2010/04/29 Javascript
浅析JavaScript中两种类型的全局对象/函数
2013/12/05 Javascript
js统计页面的来访次数实现代码
2014/05/09 Javascript
基于JavaScript实现移动端点击图片查看大图点击大图隐藏
2015/11/04 Javascript
基于jQuery Tipso插件实现消息提示框特效
2016/03/16 Javascript
学做Bootstrap的第一个页面
2016/05/15 HTML / CSS
Vue.js每天必学之计算属性computed与$watch
2016/09/05 Javascript
JS实现图片高斯模糊切换效果的焦点图实例
2017/01/21 Javascript
微信小程序开发之实现自定义Toast弹框
2017/06/08 Javascript
nodejs前端模板引擎swig入门详解
2018/05/15 NodeJs
react中使用css的7中方式(最全总结)
2019/02/11 Javascript
jQuery实现视频展示效果
2020/05/30 jQuery
[02:33]DOTA2英雄基础教程 司夜刺客
2013/12/04 DOTA
[02:04]2014DOTA2国际邀请赛 BBC小组赛第三天总结
2014/07/12 DOTA
解决Django migrate No changes detected 不能创建表的问题
2018/05/27 Python
python单例模式实例解析
2018/08/28 Python
如何在python中执行另一个py文件
2020/04/30 Python
python 三种方法实现对Excel表格的读写
2020/11/19 Python
HTML5表格_动力节点Java学院整理
2017/07/11 HTML / CSS
家庭睡衣和家庭用品:Little Blue House
2018/03/18 全球购物
YSL圣罗兰美妆俄罗斯官网:Yves Saint Lauret RU
2020/09/23 全球购物
铭万公司.net面试题笔试题
2014/07/20 面试题
2014爱耳日宣传教育活动总结
2014/03/09 职场文书
竞选劳动委员演讲稿
2014/04/28 职场文书
水污染治理工程专业求职信
2014/06/14 职场文书
学生违反校规检讨书
2014/10/28 职场文书
幼儿园开学通知
2015/04/24 职场文书
早安问候语大全
2015/11/10 职场文书
六种css3实现的边框过渡效果
2021/04/22 HTML / CSS
Python实战之疫苗研发情况可视化
2021/05/18 Python