JavaScript实现cookie的写入、读取、删除功能

当一个web页面被加载到浏览器中时,浏览器会为它分配一个cookie的存储区域。此时,开发者可以通过JavaScript代码来操作cookie的写入、读取和删除等功能。

写入cookie

可以使用document.cookie来写入cookie。document.cookie是一个字符串,它存储着当前网页的所有cookie。写入cookie的格式如下:

document.cookie = "key=value; expires=date; path=path; domain=domain; secure";

其中,各项参数的意义如下:

  • key: cookie的名称,同一网页对应多个cookie时要注意不要重名。
  • value: cookie的值,可以为任意字符串。
  • expires: cookie有效期,格式为date,如"Thu, 18 Dec 2022 12:00:00 GMT",也可以是一个过时的时间,如"-1 day"表示 cookie 会在当前时间的前一天过期。
  • path: 可选,表示cookie的作用域,如"/"表示网站的根目录,"/test/"表示网站的test目录。
  • domain: 可选,表示cookie可以被发送到哪个域名服务器,如"example.com"。
  • secure: 可选,表示cookie只能通过HTTPS协议加密传输,如"; secure"

下面是一个写入cookie的示例:

// 将名称为"name",值为"Tom",有效期为一小时的cookie写入网页
var now = new Date();
var expiredTime = now.getTime() + 60 * 60 * 1000; // 一小时后过期
now.setTime(expiredTime);
document.cookie = "name=Tom; expires=" + now.toUTCString();

读取cookie

当需要读取cookie的值时,可以使用document.cookie来获取当前网页下的cookie值。由于每个cookie都是以分号与空格作为分隔符的字符串,这就要用到JavaScript的字符串处理方法,如split()substr()indexOf()等。

下面是一个读取cookie的示例:

// 读取名称为"name"的cookie的值
function getCookie(name) {
  var cookieArr = document.cookie.split("; ");
  for (var i = 0; i < cookieArr.length; i++) {
    var pair = cookieArr[i].split("=");
    if (name == pair[0]) {
      return pair[1];
    }
  }
  return "";
}

console.log(getCookie("name")); // 输出"Tom"

删除cookie

删除cookie要注意的是,不能直接删除cookie,需要借助写入cookie时的参数来共同删除,包括name、value、expires、path、domain。如下面的示例所示:

// 删除名称为"name"的cookie
function deleteCookie(name) {
  var now = new Date();
  now.setTime(now.getTime() - 1);
  var cval = getCookie(name);
  if (cval != "") {
    document.cookie =
      name + "=" + cval + "; expires=" + now.toUTCString() + "; path=/";
  }
}

deleteCookie("name");
console.log(getCookie("name")); // 输出""

通过上述三个步骤,即可轻松地完成JavaScript实现cookie的写入、读取和删除等功能。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:JavaScript实现cookie的写入、读取、删除功能 - Python技术站

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

相关文章

  • javascript学习笔记之函数定义

    下面是关于“javascript学习笔记之函数定义”的完整攻略。 函数定义 函数的定义方式 JavaScript 中定义函数的方式有两种:函数声明和函数表达式。 函数声明 函数声明是通过 function 关键字定义的函数,它可以在任何位置被调用。例如: function add(a, b) { return a + b; } 函数声明定义的函数会被提升到作…

    JavaScript 2023年5月18日
    00
  • js中new一个对象的过程

    当我们在JavaScript中使用new关键字来创建一个对象时,实际上会发生以下过程: 创建一个新对象。这个新对象继承了它的构造函数的prototype属性。 function Person(name) { this.name = name; } let person = new Person(‘小明’); 在这个例子中,创建了一个名为Person的构造函数…

    JavaScript 2023年5月27日
    00
  • JavaScript 对象的属性和方法4种不同的类型

    JavaScript对象是一种包含属性和方法的数据结构。在JavaScript中,对象属性和方法有4种不同的类型。 1. 数据属性 数据属性是最简单的属性类型。它是对象的一个简单属性,通常被用来存储数据。数据属性有以下特征: value:属性值 writable:是否可写(true | false) enumerable:是否可枚举(true | false…

    JavaScript 2023年5月27日
    00
  • Javascript window对象详解

    Javascript window对象详解 window对象是JavaScript中的全局对象,它代表浏览器窗口或标签页。在网页中,我们经常使用window对象来操作浏览器窗口、加载新的文档等。 获取窗口的大小和位置 要获取窗口的大小和位置,我们可以使用window.innerWidth、window.innerHeight、window.outerWidt…

    JavaScript 2023年5月27日
    00
  • Three.js+React制作3D梦中海岛效果

    下面我将详细讲解“Three.js+React制作3D梦中海岛效果”的完整攻略。 简介 Three.js是一款JavaScript 3D库,它可以为我们简化3D场景的创建和管理。React是一款流行的JavaScript库,它可以让我们更容易地构建用户界面。将这两个库结合起来,我们可以更加高效的创建3D界面。 在本攻略中,我们将使用Three.js和Reac…

    JavaScript 2023年6月10日
    00
  • 时间处理工具 dayjs使用示例详解

    时间处理工具 dayjs使用示例详解 什么是dayjs dayjs是一个轻量级的处理时间和日期的Javascript库,它和moment.js类似,并且API设计相似,但是dayjs更小、更快,支持浏览器和Node.js环境。 安装dayjs dayjs提供两种方式使用:安装node模块和使用CDN。 根据使用场景进行选择,这里我们介绍如何安装node模块 …

    JavaScript 2023年5月27日
    00
  • vue $router和$route的区别详解

    下面是详细讲解“vue $router和$route的区别详解”的完整攻略: 背景 Vue.js 是一个轻量级的 MVVM 前端框架,常用的路由管理器是 vue-router。在使用 vue-router 过程中,可能会涉及到两个关键对象:$router 和 $route。这两个对象貌似很相似,但实际上有着明确的区别。本文将详细讲解两者的区别和应用场景。 $…

    JavaScript 2023年6月11日
    00
  • js实现数据双向绑定(访问器监听)

    数据双向绑定是前端开发中常用的技术,可以实现数据和页面UI的同步更新。其中一种常用的实现方式是使用访问器监听。以下是实现数据双向绑定的完整攻略: 步骤一:创建数据对象 首先,需要在Javascript中创建一个数据对象,该对象的属性可以通过访问器方法来监控对象属性的读取和修改。 let data = {} // 创建一个数据对象 Object.defineP…

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