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实现页面自适应
Jan 19 Javascript
jquery五角星评分插件示例分享
Feb 21 Javascript
jQuery动画特效实例教程
Aug 29 Javascript
深入分析Cookie的安全性问题
Mar 01 Javascript
JavaScript入门教程之引用类型
May 04 Javascript
web打印小结
Jan 11 Javascript
vuejs2.0运用原生js实现简单的拖拽元素功能示例
Feb 24 Javascript
axios进阶实践之利用最优雅的方式写ajax请求
Dec 20 Javascript
Vue用v-for给src属性赋值的方法
Mar 03 Javascript
微信小程序自定义组件之可清除的input组件
Jul 17 Javascript
在JavaScript中如何访问暂未存在的嵌套对象
Jun 18 Javascript
解决vue cli使用typescript后打包巨慢的问题
Sep 30 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
全局记录程序片段的运行时间 正确找到程序逻辑耗时多的断点
2011/01/06 PHP
php入门学习知识点三 PHP上传
2011/07/14 PHP
PHP设计模式 注册表模式(多个类的注册)
2012/02/05 PHP
解析php中的escape函数
2013/06/29 PHP
Laravel 5框架学习之表单验证
2015/04/08 PHP
PHP设计模式之适配器模式代码实例
2015/05/11 PHP
php 输出json及显示json中的中文汉字详解及实例
2016/11/09 PHP
jquery一句话全选/取消全选
2011/03/01 Javascript
解析javascript 浏览器关闭事件
2013/07/08 Javascript
FF(火狐)浏览器无法执行window.close()解决方案
2014/11/13 Javascript
本人自用的global.js库源码分享
2015/02/28 Javascript
angular过滤器实现排序功能
2017/06/27 Javascript
javascript 跨域问题以及解决办法
2017/07/17 Javascript
JavaScript学习笔记之DOM操作实例分析
2019/01/08 Javascript
Vue源码分析之Vue实例初始化详解
2019/08/25 Javascript
JS控制GIF图片的停止与显示
2019/10/24 Javascript
简单了解Vue + ElementUI后台管理模板
2020/04/07 Javascript
Python3实现的腾讯微博自动发帖小工具
2013/11/11 Python
使用Python实现下载网易云音乐的高清MV
2015/03/16 Python
Python 多进程并发操作中进程池Pool的实例
2017/11/01 Python
Python将多个excel表格合并为一个表格
2021/02/22 Python
Python Learning 列表的更多操作及示例代码
2018/08/22 Python
Python随机数函数代码实例解析
2020/02/09 Python
Python3中的f-Strings增强版字符串格式化方法
2020/03/04 Python
python 输入字符串生成所有有效的IP地址(LeetCode 93号题)
2020/10/15 Python
英国翻新电子产品购物网站:Tech Trade
2017/12/25 全球购物
中国一家专注拼团的社交购物网站:拼多多
2018/06/13 全球购物
英国最大的在线快递公司之一:ParcelHero
2019/11/04 全球购物
普天C++笔试题
2016/03/20 面试题
办公室文秘自我鉴定
2013/09/21 职场文书
青蓝工程实施方案
2014/03/27 职场文书
中班上学期幼儿评语
2014/04/30 职场文书
2015年物流客服工作总结
2015/07/27 职场文书
三八红旗手主要事迹材料
2015/11/04 职场文书
素质教育培训心得体会
2016/01/19 职场文书
vue+element ui实现锚点定位
2021/06/29 Vue.js