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日

相关文章

  • JavaScript中?. 和??分别是什么详解

    让我来详细讲解JavaScript中?.和??的使用。 ?.运算符 ?.运算符是ES2020(也称为ES11)中的新功能,它是用于简化可选链式调用的一种语法糖。可选链式调用允许我们选择性地访问一个对象的属性,它避免了访问未定义的对象属性时出现的TypeError错误。 示例1: const user = { name: ‘Tom’, age: 25, add…

    JavaScript 2023年5月18日
    00
  • JS敏感词过滤代码

    JS敏感词过滤代码是在前端使用JS实现对输入内容进行敏感词的过滤,以保证输入内容的合规和安全。 以下是JS敏感词过滤代码的完整攻略: 前置知识 正则表达式:JS敏感词过滤涉及到正则表达式的使用,需要了解正则表达式的使用方法。 JS基础语法:需要掌握JS基础语法,包括变量定义、函数定义等。 过程说明 第一步:定义敏感词列表 首先需要定义一个敏感词列表,用于保存…

    JavaScript 2023年6月10日
    00
  • js 剪切板应用clipboardData详细解析

    JS 剪切板应用 clipboardData 详细解析 简介 JavaScript 使用 clipboardData 接口可以实现网页内容和剪贴板之间的交互。通过该接口,我们可以轻松地将文本、图像等数据从我们的网页复制到用户剪贴板中,也可以从剪贴板中获取用户复制的内容并进行处理。 clipboardData 属性 clipboardData 是一个全局对象,…

    JavaScript 2023年6月11日
    00
  • 关于字符串和对象互转以及JSON.parse()的坑

    关于字符串和对象互转以及JSON.parse()的坑,涉及到前端开发中的常见问题。下面就从以下三个方面进行详细讲解: JSON.parse()的使用 对象转字符串 字符串转对象 1. JSON.parse()的使用 1.1. JSON.parse()的作用 将JSON字符串转换成JavaScript对象或数据结构。 1.2. JSON.parse()的限制 …

    JavaScript 2023年5月27日
    00
  • JS求解两数之和算法详解

    JS求解两数之和算法详解 什么是两数之和算法? 两个整数的和就是将这两个数加起来得到的数。而两数之和算法是指在给定一组整数的情况下,找到其中两个数之和等于给定目标值的两个数。 算法的实现步骤 循环遍历整个数列,固定一个数,得到另一个数。 在剩下的数列中循环查找另一个数(目标值减去当前数),如果查找到,则说明找到了答案。 返回两个数的下标。 代码示例1 下面是…

    JavaScript 2023年5月28日
    00
  • 利用JS hash制作单页Web应用的方法详解

    下面是“利用JS hash制作单页Web应用的方法详解”的完整攻略。 首先介绍什么是单页Web应用 单页Web应用(Single-Page Application,SPA)是一种新型的Web应用程序模型。所谓单页应用,就是将多个页面应用整合在一个HTML文件中,通过JS动态更新HTML内容。 相对于传统的多页应用程序,单页应用程序具有以下优点: 用户体验好,…

    JavaScript 2023年6月11日
    00
  • c# 实现控件(ocx)中的事件详解

    下面是“c# 实现控件(ocx)中的事件详解”的完整攻略: 1. 什么是控件(ocx) 控件(ocx)是一种Microsoft公司开发的一种通用控件技术,主要应用于Windows操作系统中。它可以被嵌入到其他应用程序中,实现特定的功能,例如多媒体播放器、数据库控件等。控件(ocx)可以使用不同编程语言来开发,如C++、VB6、C#等。 2. 创建控件(ocx…

    JavaScript 2023年5月28日
    00
  • js实现简单实用的AJAX完整实例

    看来你对AJAX还是有一些疑问,下面我来给你讲解JS如何实现简单实用的AJAX完整实例。 AJAX是什么 在开始之前,首先我们需要明确AJAX的概念。AJAX全称是Asynchronous JavaScript and XML,也就是异步的JavaScript和XML。它实际上是指利用JavaScript在不刷新整个页面的情况下,向服务器异步请求数据,并将数…

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