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日

相关文章

  • php正则删除html代码中class样式属性的方法 原创

    PHP正则删除HTML代码中class样式属性的方法 在PHP中,删除HTML代码中的Class样式属性是一个常见的需求,我们可以使用正则表达式来完成。下面将介绍如何使用正则表达式来删除HTML代码中的Class样式属性。 使用preg_replace函数 PHP中的preg_replace函数可以使用正则表达式替换子串。我们可以使用此函数删除HTML代码中…

    JavaScript 2023年6月10日
    00
  • 记录 Promise 的方法

    Promise 是异步编程的一种解决方案,比传统的回调函数或事件更合理和更灵活。 Promise 方法 Promise的原型方法:then/catch/finally,这三种方法很常用,then用于处理Promise转为fulfilled状态时的代码,catch用于处理Promise转为rejected状态时的代码(当然then的第二个参数也可处理rejec…

    JavaScript 2023年4月17日
    00
  • js实现星星闪特效

    首先介绍一下实现星星闪特效的基本思路,整个流程分为以下几步: 随机生成 N 个星星的位置和大小 再随机为每个星星设置一个动画延迟时间 使用 CSS3 动画为每个星星设置闪烁效果 可以通过 js 实现控制整个星空的暂停和继续 接下来,我将逐步详细讲解。 1. 随机生成 N 个星星的位置和大小 首先需要使用 js 随机生成一组星星的位置和大小,这可以使用循环来实…

    JavaScript 2023年6月10日
    00
  • JavaScript函数式编程(Functional Programming)声明式与命令式实例分析

    JavaScript函数式编程(Functional Programming)声明式与命令式实例分析 什么是函数式编程? 函数式编程(Functional Programming)是一种编程范式,其核心思想是用函数去组织代码,减少对于状态的依赖和改变,强调函数的纯粹性和不可变性,从而实现代码的简洁性、健壮性和可维护性。 声明式编程与命令式编程 命令式编程 命…

    JavaScript 2023年5月27日
    00
  • Web Worker线程解决方案electron踩坑记录

    Web Worker线程解决方案electron踩坑记录 背景 在使用 Electron 进行开发时,我们可能会遇到 JavaScript 主线程被阻塞的情况。通常,这种问题会影响应用程序的响应性能,导致应用程序变得缓慢甚至无响应。 为了解决这种问题,我们可以使用 Web Worker 线程来将一些计算密集型任务放到后台进行处理,从而避免主线程阻塞。 Web…

    JavaScript 2023年5月27日
    00
  • 原生JS:Date对象全面解析

    原生JS:Date对象全面解析 什么是Date对象 Date 对象是 JavaScript 中的内置对象,用于处理日期和时间。可以使用 new 关键字实例化一个 Date 对象。 var now = new Date(); 上述代码会返回一个 Date 对象,表示当前的日期和时间。 Date对象的方法和属性 获取年份,月份和日期 Date 对象提供了获取其表…

    JavaScript 2023年5月27日
    00
  • JavaScript中的私有/静态属性介绍

    当我们谈到JavaScript中的“私有”和“静态”属性时,我们实际上是在谈论不同类型的属性。 私有属性 私有属性是指只能在类的内部使用的属性。这意味着它们不能通过类的实例或外部访问。为了理解私有属性,让我们来看一个简单的例子: class Person { #name = ”; set name(name) { this.#name = name; } …

    JavaScript 2023年6月10日
    00
  • 基于JavaScript实现高德地图和百度地图提取行政区边界经纬度坐标

    当我们需要在网站上显示特定区域的地图界面时,我们需要提取地图的行政区边界的经纬度坐标。在本文中,我们将使用JavaScript实现高德地图和百度地图提取行政区边界经纬度坐标。 准备工作 在开始之前,我们需要在相应的地图开发平台上注册账号并获取相应的API Key。对于高德地图,可以在高德地图开放平台上注册并获取Key;对于百度地图,可以在百度地图开放平台上注…

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