JavaScript中Cookies的相关使用教程

 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()函数看到新值。

赞 (0)

相关推荐

  • javascript 操作cookies及正确使用cookies的属性

    一.从写 cookie 说起. var the_date = new Date("December 31, 2020"); var expiresDate = the_date.toGMTString(); document.cookie = "userDefineCSS=" + escape(title) + "; expires=" + expiresDate; 第一句是日期对象: 第二句将日期格式转换成 GMT 格式:编者者: GMT 即格

  • php读取javascript设置的cookies的代码

    下面给代码: 复制代码 代码如下: <script language="JavaScript" type="text/javascript"> function setmycookie(name) //主要里面的参数 { $name = "thename"; $namev = test.num.value; var date = new Date(); $livetime = 5*24*3600*1000; date.setTime(

  • javascript 操作cookies详解及实例

    javascript 操作cookies详解 这段操作cookies的方法我使用很久了,但是一直一来没遇到什么问题,今天在做一个在第一个页面保存了cookies,第二个页面获取或者第三个页面获取的功能中,发现了方法的局限性,比如,第一个页面路径为 http://xxxxx/cyb-car2016/h5OfficeWorker/index,第二个页面路径为 http://xxxxx/cyb-car2016/h5AlertController/index,其中除了域名是一样之外,还有一个命名空间不一

  • JS操作Cookies包括(读取添加与删除)

    一直都是简单去js实现cookie的一些操作,今天把js对cookie操作系统的整理了一遍,包括:js读取cookie,js添加cookie,js删除cookie,示例如下: 复制代码 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http

  • javascript操作cookie的文章(设置，删除cookies)

    下面这篇是国外的一篇文章.http://www.jb51.net/article/20553.htm 复制代码 代码如下: var sel = new Object(); var sel_num = 0; function getCookieVal(offset) { var endstr = document.cookie.indexOf(";", offset); if (endstr == -1) endstr = document.cookie.length; return u

  • JS设置获取cookies的方法

    结合JavaScript权威指南,加上项目开发时在网上搜集的资料,整理了两种设置和获取cookie的方法. 复制代码 代码如下: <script> //设置cookie  方法一function setCookie(name,value){ var exp = new Date(); exp.setTime(exp.getTime() + 1*60*60*1000);//有效期1小时 document.cookie = name + "="+ escape (value)

  • JS实现清除指定cookies的方法

    本文实例讲述了JS实现清除指定cookies的方法,非常实用.分享给大家供大家参考. 具体实现代码如下: function GetCookieValue(name) { var cookieValue = null; if (document.cookie && document.cookie != '') { var cookies = document.cookie.split(';'); for (var i = 0; i < cookies.length; i++) { va

  • js从Cookies里面取值的简单实现

    js从Cookies里面取值的简单实现

    工作过程中遇到一个Js从Cookies里面取值的需求,Js貌似没有现成的方法可以指定Key值获取Cookie里面对应的值,参阅网上的代码,简单实现如下: 1. 服务端代码,Page_Load里面Cookies写入几个值 using System; using System.Collections.Generic; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; namespace WebApplica

  • JS操作Cookies的小例子

    复制代码 代码如下: Cookie = {    setCookie: function (name, val) {        var exp = new Date();        exp.setDate(exp.getDate() + 600 * 1000);        document.cookie = name + "=" + escape(val) + ";expires=" + exp.toGMTString();    }, DelCooki

  • JavaScript中Cookies的相关使用教程

     Cookies是什么 ? Web浏览器和服务器使用HTTP协议进行通信,并且HTTP是一种无状态协议.但对于一个商业网站它需要保持不同的页面间的会话信息.例如在完成多页后,一个用户注册结束.但是,如何保持所有网页用户的会话信息. 在许多情况下,使用Cookie来记忆和跟踪的喜好,采购,佣金,并要求更好的访问体验或网站的统计数据等信息的最有效的方法. 它是如何工作的 ? 服务器发送一些数据到访问者的浏览器以cookie的形式.该浏览器可以接受cookie.如果是这样,它是为访问者存储在硬盘驱动器

  • JavaScript中Math对象相关知识全解

    目录 前言 常用属性 常用方法 实例参考 总结 前言 除了简单的加减乘除,在某些长和开发者需要进行更为复杂的数学运算.JavaScript的Math对象提供了一系列属性和方法,能够满足大多数场合的需求. Math对象是JavaScript的全局对象,不需要由函数进行创建.有且只有一个Math对象. 常用属性 属性 说明 Math.E 返回值e(自然对数的底数) Math.LN10 返回10的自然对数 Math.LN2 返回2的自然对数 Math.LOG2E 返回以2为底的e的对数 Math.LO

  • JavaScript中Array 对象相关的几个方法

    push 方法将新元素添加到一个数组中,并返回数组的新长度值. arrayObj.push([item1 [item2 [. . . [itemN ]]]])参数arrayObj 必选项.一个 Array 对象. item, item2,. . . itemN 可选项.该 Array 的新元素. 说明push 方法将以新元素出现的顺序添加这些元素.如果参数之一为数组,那么该数组将作为单个元素添加到数组中.如果要合并两个或多个数组中的元素,请使用 concat 方法. 示例 <script typ

  • JavaScript中的Object对象学习教程

    参数: (1)obj 必需.Object 对象分配到的变量名称.  (2)值 可选.任一 JavaScript 基元数据类型(数字.布尔值或字符串).  如果值是一个对象,则返回的对象是未修改的.  如果值是 null."未定义"或"未提供",则创建无内容的对象. Object对象的方法 Object作为构造函数使用时,可以接受一个参数.如果该参数是一个对象,则直接返回这个对象:如果是一个原始类型的值,则返回该值对应的包装对象.利用这一点,可以写一个判断变量是否为对

  • 详解JavaScript中数组的相关知识

    创建数组 js中数组的声明可以有如下几种方式: var arr = []; // 简写模式 var arr = new Array(); // new一个array对象 var arr = new Array(arrayLength); // new一个确定长度的array对象 要说明的是: 虽然第三种方法声明了数组的长度,但是实际上数组长度是可变的.也就是说,即使指定了长度为5,仍然可以将元素存储在规定长度之外,这时数组的长度也会随之改变. 此外,还需要明确的一点: js是弱类型语言,也就是数

  • JavaScript中pop()方法的使用教程

    JavaScript数组pop()方法删除数组中的最后一个元素,并返回该元素. 语法 array.pop(); 下面是参数的详细信息: NA 返回值: 返回从数组中删除的元素. 例子: <html> <head> <title>JavaScript Array pop Method</title> </head> <body> <script type="text/javascript"> var nu

  • Python中分数的相关使用教程

    你可能不需要经常处理分数,但当你需要时,Python的Fraction类会给你很大的帮助.在该指南中,我将提供一些有趣的实例,用于展示如何处理分数,突出显示一些很酷的功能. 1 基础 Fraction类在Lib/fractions.py文件中,所以可以这样导入: from fractions import Fraction 有很多种实例化Fraction类的方法. 首先,你可以传入分子和分母: >>> Fraction(1, 2) Fraction(1, 2) 或者利用另一个分数进行实例

  • JavaScript中的style.cssText使用教程

    很多人用过 style.color.style.display 等直接设置元素的样式属性,但是 style.cssText 用过的人就不多了. cssText 本质是什么? cssText 的本质就是设置 HTML 元素的 style 属性值. cssText 怎么用? 复制代码 代码如下: document.getElementById("d1").style.cssText = "color:red; font-size:13px;"; 看了这个示例后,相信不说

  • JavaScript中日期的相关操作方法总结

    创建日期 Date 对象用于处理日期和时间. 可以通过 new 关键词来定义 Date 对象.以下代码定义了名为 myDate 的 Date 对象: 有四种方式初始化日期: new Date() // 当前日期和时间 new Date(milliseconds) //返回从 1970 年 1 月 1 日至今的毫秒数 new Date(dateString) new Date(year, month, day, hours, minutes, seconds, milliseconds) 上面的参

  • JavaScript中Function()函数的使用教程

    function语句不是定义一个新的函数,并且可以定义你的函数动态使用Function()构造使用操作符的唯一途径. 注:这是面向对象编程的术语.第一次可能会感觉不太习惯,这里是没有问题的. 语法 下面是使用new运算符创建一个使用功能Function()构造的语法. <script type="text/javascript"> <!-- var variablename = new Function(Arg1, Arg2..., "Function Bo

随机推荐