Javascript 对cookie操作详解及实例

Javascript 对cookie操作详解及实例

什么是cookie

Cookie 是一种存储在用户计算机上的小数据文件,它通常由网站在后端生成,通过浏览器发送到前端,并在前端保存。然后,在用户下次访问该网站时,该网站可以再次检索这些 cookie,并计算出该用户的特定信息,例如用户首选语言、购物车中的项目等。通常情况下,cookie 用于存储与特定网站相关的用户偏好和其他信息。

Javascript 对cookie的操作

使用JavaScript 可以对 cookie 进行以下操作:

  • 创建cookie
  • 获取cookie
  • 设置cookie到期时间
  • 删除cookie

创建cookie

要创建一个 cookie,请使用 document.cookie:

document.cookie = "username=Minghui Zhang";

上面的代码创建一个名为 username,值为 Minghui Zhang 的 cookie。如果您尝试查看 document.cookie,则应该看到以下输出:

"username=Minghui Zhang"

获取cookie

要获取 cookie 的值,请使用以下代码行:

var x = document.cookie;

上面的代码将返回存储在 cookie 中的所有内容。

如果要获取特定 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 "";
}

该函数将返回存储在 cookie 中的 cname 变量的值。如果 cookie 不存在,则返回空字符串。

设置 cookie 的到期时间

默认情况下,cookie 是在浏览器关闭时删除的。但是,您还可以将 cookie 设置为在特定日期过期。要设置 cookie 的到期日期,请使用以下语法:

var d = new Date();
d.setTime(d.getTime() + (24*60*60*1000));
var expires = "expires="+ d.toUTCString();

document.cookie = "username=John" + ";" + expires;

上面的代码将在一天后过期 username cookie。

删除cookie

要删除 cookie,请将 cookie 的到期日期设置为过去的日期,如下所示:

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

该代码会删除 username cookie。

示例

示例1: 在用户访问网站时记录访问次数

function checkCookie() {
  var count = getCookie("count") || 0;
  count++;
  setCookie("count", count, 30);
  alert("你是第" + count + "次访问该网站!");
}

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 "";
}

该示例如下:

<!DOCTYPE html>
<html>
<body onload="checkCookie()">
<h2>Cookie 计数器</h2>
<p>每当您访问此网站时,cookie 将存储您的访问次数。</p>
</body>
</html>

示例2: 通过 cookie 在网站之间共享数据

假设您正在开发一个具有登录和购物车功能的网站,并且您想使购物车在不同网页之间进行共享。要通过 cookie 共享购物车数据,请使用以下代码:

var cart = {item1: "product1", item2: "product2"};

// To set the cart
document.cookie = "cart=" + JSON.stringify(cart);

// To get the cart
var cart = JSON.parse(getCookie("cart"));

上面的代码将以 JSON 格式存储 cart 对象,并通过 cookie 共享它所表示的购物车数据。

结论

cookie 是 Web 开发人员的重要工具。使用 JavaScript,开发人员可以轻松地创建、获取和更新 cookie,从而存储访问者的个性化信息、购买历史和其他数据。无论是为网站追踪用户信息还是为在不同页面之间共享数据,使用 cookie 都是极其有用的。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:Javascript 对cookie操作详解及实例 - Python技术站

(0)
上一篇 2023年6月10日
下一篇 2023年6月10日

相关文章

  • 原生js实现3D轮播图

    下面是完整的“原生js实现3D轮播图”的攻略: 1. 确定轮播图的基本结构和样式 首先,需要明确轮播图的结构和样式。通常情况下,我们会使用一个外层容器作为整个轮播图的父容器,然后在其内部创建一个可滚动的容器,用来存放每一张轮播图的卡片;同时,在卡片内部再创建一个容器用来存放图片和其他信息。以下是一个示例的HTML代码: <div class=&quot…

    JavaScript 2023年6月11日
    00
  • 动态的创建一个元素createElement及删除一个元素

    动态地创建和删除元素是网页可交互性的基础,也是JavaScript编程中的重要部分。创建元素,可以在指定的位置插入新的元素、编辑和更新页面内容,而删除元素,可以清除页面上不需要的部分,使页面更加简洁美观。下面来详细讲解动态创建元素和删除元素的攻略。 动态创建一个元素 createElement 创建一个元素,首先需要使用createElement()方法创建…

    JavaScript 2023年6月10日
    00
  • JavaScript中使用concat()方法拼接字符串的教程

    当我们需要在JavaScript中拼接多个字符串时,可以使用concat()方法。该方法将传递给它的字符串与原始字符串连接起来,并返回新的字符串,而不改变原始字符串。下面是使用concat()方法拼接字符串的完整攻略: 使用concat()方法拼接字符串的步骤: 步骤1:创建要拼接的字符串 在使用concat()方法之前,我们需要先定义要拼接的字符串。可以将…

    JavaScript 2023年5月28日
    00
  • js获取Get值的方法

    下面是关于“JS获取Get值的方法”的完整攻略: 什么是Get请求 在Web开发中,我们常常需要通过URL传输数据。传输的方式有两种,一种是GET请求,另一种是POST请求。其中,GET请求通常用于获取数据,POST请求则通常用于提交数据。在GET请求中,数据是通过URL传递的,因此可以通过解析URL中的参数来获取数据。 JS获取Get值的方法 在JavaS…

    JavaScript 2023年5月28日
    00
  • JS实现json的序列化和反序列化功能示例

    下面是关于“JS实现json的序列化和反序列化功能示例”的完整攻略: 一、什么是JSON? JSON全称为JavaScript Object Notation,是一种轻量级的数据交换格式。JSON基于JavaScript语法的一部分,但是可以被包括C,C++,Java,Python等等其他编程语言所使用。 JSON通常用于客户端和服务器之间的数据传输。可以将…

    JavaScript 2023年5月27日
    00
  • 作为程序员必须了解的缩写和专业名词

    作为程序员必须了解的缩写和专业名词 作为一名程序员,掌握一些缩写和专业术语是非常重要的,可以帮助我们更快速地理解代码和文档,也能够更好地和同行进行沟通交流。下面是一些必须了解的缩写和专业名词: 常见缩写 API API是Application Programming Interface的缩写, 指的是应用程序编程接口,是一组定义、规范了应用程序中数据和功能的…

    JavaScript 2023年5月28日
    00
  • 详解javascript中的Error对象

    详解JavaScript中的Error对象 在JavaScript编程中,出错是常有的事情。为了更好地调试JavaScript代码,以及了解错误的类型和信息,JavaScript提供了Error对象来捕获和处理运行时的错误。 Error对象简介 Error对象是JavaScript的内置对象之一,它是个通用的错误对象,所有错误类型的实例都继承自该对象。 在J…

    JavaScript 2023年5月27日
    00
  • JavaScript计算器网页版实现代码分享

    JavaScript计算器是一个常见的前端项目,本攻略旨在分享JavaScript计算器的网页版实现代码,以下是详细步骤: 步骤1:创建基本的网页结构 首先,我们需要创建一个基本的HTML网页结构,添加一些基本的元素,如标题、输入框和按钮。通过以下代码实现: <!DOCTYPE html> <html> <head> &l…

    JavaScript 2023年5月28日
    00
合作推广
合作推广
分享本页
返回顶部