JavaScript BOM Cookie 的用法

Carbs 发布于2019-08-26 10:31 / 523人阅读

摘要：如果您的浏览器已关闭本地支持，则以下示例均无效。删除时，不必指定值。但事实并非如此。访问者第一次到达网页时，将要求他她填写他她的姓名。检查的功能最后，我们创建一个函数来检查是否设置了。

JavaScript Cookie

Cookie是计算机上存储在小文本文件中的数据。当Web服务器将网页发送到浏览器时，连接将关闭，服务器将忘记用户的所有内容。发明Cookie是为了解决“如何记住用户信息”的问题：
当用户访问网页时，他/她的名字可以存储在cookie中。
下次用户访问该页面时，cookie会“记住”他/她的名字。
Cookie以键值对形式保存，如：

username = John Doe

当浏览器从服务器请求网页时，属于该页面的cookie将添加到请求中。这样，服务器获取必要的数据以“记住”有关用户的信息。
如果您的浏览器已关闭本地Cookie支持，则以下示例均无效。

使用JavaScript创建Cookie

JavaScript可以使用document.cookie属性创建，读取和删除cookie。使用JavaScript，可以像这样创建一个cookie：

document.cookie = "username=John Doe";

您还可以添加到期日期（以UTC时间为单位）。默认情况下，在浏览器关闭时删除cookie：

document.cookie = "username=John Doe; expires=Thu, 18 Dec 2013 12:00:00 UTC";

使用path参数，您可以告诉浏览器cookie属于哪个路径。默认情况下，cookie属于当前页面。

document.cookie = "username=John Doe; expires=Thu, 18 Dec 2013 12:00:00 UTC; path=/";

使用JavaScript阅读Cookie

使用JavaScript，cookie可以像这样读取：

var x = document.cookie;

document.cookie将返回一个字符串中的所有cookie，如：cookie1 = value; cookie2 =值; cookie3 =值;

使用JavaScript更改Cookie

使用JavaScript，您可以像创建cookie一样更改cookie：

document.cookie = "username=John Smith; expires=Thu, 18 Dec 2013 12:00:00 UTC; path=/";

旧cookie被覆盖。

使用JavaScript删除Cookie

删除cookie非常简单。删除cookie时，不必指定cookie值。只需将expires参数设置为传递日期：

document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";

您应该定义cookie路径以确保删除正确的cookie。如果您未指定路径，某些浏览器将不允许您删除cookie。

Cookie字符串

document.cookie属性看起来像普通的文本字符串。但事实并非如此。即使你将一个完整的cookie字符串写入document.cookie，当你再次读出它时，你只能看到它的名称 - 值对。如果您设置了新cookie，则不会覆盖较旧的cookie。新的cookie被添加到document.cookie，所以如果你再次阅读document.cookie，你会得到类似的东西：cookie1 = value; cookie2 = value;
如果要查找一个指定cookie的值，则必须编写一个JavaScript函数来搜索cookie字符串中的cookie值。

JavaScript Cookie示例

在下面的示例中，我们将创建一个存储访客姓名的cookie。访问者第一次到达网页时，将要求他/她填写他/她的姓名。然后将名称存储在cookie中。下次访问者到达同一页面时，他/她将收到欢迎信息。在这个例子中，我们将创建3个JavaScript函数：

用于设置cookie值的函数

获取cookie值的函数

用于检查cookie值的函数

设置Cookie的功能

首先，我们创建一个函数将访问者的名称存储在cookie变量中：

function setCookie(cname, cvalue, exdays) {
  var d = new Date();
  d.setTime(d.getTime() + (exdays*24*60*60*1000));
  var expires = "expires="+ d.toUTCString();
  document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}

示例说明：
上述函数的参数是cookie的名称（cname），cookie的值（cvalue）以及cookie到期之前的天数（exdays）。该函数通过将cookiename，cookie值和expires字符串相加来设置cookie。
获取Cookie的功能
然后，我们创建一个function返回指定cookie的值：

function getCookie(cname) {
  var name = cname + "=";
  var decodedCookie = decodeURIComponent(document.cookie);
  var ca = decodedCookie.split(";");
  for(var i = 0; i < ca.length; i++) {
    var c = ca[i];
    while (c.charAt(0) == " ") {
      c = c.substring(1);
    }
    if (c.indexOf(name) == 0) {
      return c.substring(name.length, c.length);
    }
  }
  return "";
}

功能说明：
将cookiename作为参数（cname）。使用要搜索的文本（cname +“=”）创建变量（名称）。解码cookie字符串，处理带有特殊字符的cookie，例如"$"将分号上的document.cookie拆分为名为ca的数组（ca = decodingCookie.split（";"））。循环通过ca数组（i = 0; i < ca.length; i ++），并读出每个值c = ca [i]）。如果找到cookie（c.indexOf（name）== 0），则返回cookie的值（c.substring（name.length，c.length））。如果找不到cookie，则返回“”。
检查Cookie的功能
最后，我们创建一个函数来检查是否设置了cookie。如果设置了cookie，它将显示问候语。如果未设置cookie，它将显示一个提示框，询问用户的名称，并通过调用setCookie函数将用户名cookie存储365天：

function checkCookie() {
  var username = getCookie("username");
  if (username != "") {
   alert("Welcome again " + username);
  } else {
    username = prompt("Please enter your name:", "");
    if (username != "" && username != null) {
      setCookie("username", username, 365);
    }
  }
}

所有代码都在一起实现

function setCookie(cname, cvalue, exdays) {
  var d = new Date();
  d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
  var expires = "expires="+d.toUTCString();
  document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}
function getCookie(cname) {
  var name = cname + "=";
  var ca = document.cookie.split(";");
  for(var i = 0; i < ca.length; i++) {
    var c = ca[i];
    while (c.charAt(0) == " ") {
      c = c.substring(1);
    }
    if (c.indexOf(name) == 0) {
      return c.substring(name.length, c.length);
    }
  }
  return "";
}
function checkCookie() {
  var user = getCookie("username");
  if (user != "") {
    alert("Welcome again " + user);
  } else {
    user = prompt("Please enter your name:", "");
    if (user != "" && user != null) {
      setCookie("username", user, 365);
    }
  }
}

上面的示例checkCookie()在页面加载时运行该函数。
更详情的Cookie技术文章

云服务器 GPU云服务器 javascript创建cookie javascript获取cookie javascript删除cookie JavaScript使用cookie

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/106303.html

JavaScript 基础知识 - BOM篇

摘要：在中我们需要掌握定时器。定时器不是我们调用，我们只需要把函数的地址传过去，时间到了，会自己调用。参数延时的时间单位毫秒返回定时器的，用于清除示例代码延时定时器秒后将执行的代码。 showImg(https://segmentfault.com/img/remote/1460000012575821?w=1920&h=1080); 前言本篇文章是JavaScript基础知识的BOM篇，...

garfileo 2019-08-01 18:16 评论0 收藏0
JavaScript 基础知识 - BOM篇

摘要：在中我们需要掌握定时器。定时器不是我们调用，我们只需要把函数的地址传过去，时间到了，会自己调用。参数延时的时间单位毫秒返回定时器的，用于清除示例代码延时定时器秒后将执行的代码。 showImg(https://segmentfault.com/img/remote/1460000012575821?w=1920&h=1080); 前言本篇文章是JavaScript基础知识的BOM篇，...

Object 2019-08-21 18:24 评论0 收藏0
面试题总结

摘要：所以个人建议将登陆信息等重要信息存放为其他信息如果需要保留，可以放在中和属性的异同共同点对内联元素设置和属性，可以让元素脱离文档流，并且可以设置其宽高。不同点仍会占据位置，会覆盖文档流中的其他元素。说说你对闭包的理解使用闭包主要是为了设计私有的方法和变量。闭包的优点是可以避免全局变量的污染，缺点是闭包会常驻内存，会增大内存使用量，使用不当很容易造成内存泄露。闭包有三个特性：函...

RiverLi 2019-08-20 17:33 评论0 收藏0
常见js笔试面试题（持续更新）

摘要：相当于绕过了浏览器端，自然就不存在跨域问题。三者的区别与服务器的交互数据始终在同源的请求中携带即使不需要，即在浏览器和服务器间来回传递。而和不会自动把数据发给服务器，仅在本地保存。和虽然也有存储大小的限制，但比大得多，可以达到或更大。本文提供最简便的解答方式，方便快速记忆，复盘，详细答案可自己再搜一下。 js基础知识 1. javascript typeof返会的数据类型有哪些 ob...

yuxue 2019-08-21 17:28 评论0 收藏0
网站常见安全问题记录（持续更新）

摘要：由此造成即使页面的或者设置为，也无法让整个网页紧贴浏览器顶部，因为在一开头有这个隐藏字符解决办法保存文件为建议不要用记事本打开开发文件说明初衷：本文档用于记录所遇到的网站安全问题，并分类汇总，方便后期遇到类似问题，能够快速找到解决方案，提高效率，让程序员有更多的时间去把妹，LOL... 记录规范：标题必须清晰明了，方便用户快速查找，拒绝标题党；问题放到正确的分类中；记录问...

Jason_Geng 2019-07-24 10:52 评论0 收藏0