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文件上传是Web开发中常用的功能,但是在开发过程中也会出现一些常见问题。下面我给您讲解一下JavaScript文件上传的常见问题整理。 1. 文件上传的原理 文件上传的原理是通过form表单提交,form表单中需要使用标签项。选择文件后,将文件内容Post到服务器上的指定路径,服务器端处理完成后返回结果给浏览器。 2. 常见问题 2.1.…

    JavaScript 2023年5月19日
    00
  • JS中FileReader类实现文件上传及时预览功能

    下面是详细的讲解: JS中FileReader类实现文件上传及时预览功能 1. FileReader类介绍 FileReader是HTML5中提供的一个用来读取文件的类,可以通过它将本地的文件读取到内存中。可用于文件上传前的文件预览功能。 FileReader类有以下2个主要方法: readAsDataURL(file):将读取到的文件转换成base64编码…

    JavaScript 2023年5月27日
    00
  • JavaScript正则表达式(总结篇)

    JavaScript正则表达式(总结篇) 什么是正则表达式 正则表达式是一种描述字符模式的工具,它提供了一种灵活的方式来匹配、查找、替换字符串中的文本。 在JavaScript中,正则表达式通常使用RegExp对象创建,它可以表示一个字符串的模式。 创建正则表达式 有两种方式可以创建正则表达式: 字面量方式,使用斜杠/../../来创建正则表达式。 java…

    JavaScript 2023年5月28日
    00
  • js+html获取系统当前时间

    获取系统当前时间是网页应用开发和Javascript开发中经常需要实现的功能之一。本篇攻略将详细介绍如何使用JS和HTML获取系统当前时间,包括获取本地系统时间和获取标准UTC时间的方法。下面是完整的攻略。 获取本地系统时间 要获取本地系统时间,我们可以使用JavaScript中内置的Date对象,该对象可以返回当前日期和时间的各个部分,例如年、月、日、小时…

    JavaScript 2023年5月27日
    00
  • 由document.body和document.documentElement想到的

    想要使用document.body或document.documentElement,需要先了解它们的含义。 document.documentElement代表了整个HTML文档,包括标签及其下的所有内容。而document.body代表了标签及其下的所有内容。在使用document.body或document.documentElement时,可以通过它…

    JavaScript 2023年6月11日
    00
  • JS前端同源策略和跨域及防抖节流详解

    JS前端同源策略和跨域及防抖节流是JS前端开发中常见的一些概念和技术。下面将详细讲解这些内容。 JavaScript前端同源策略 同源策略是一种安全策略,用于限制一个源加载的文档或脚本与来自另一个源所加载文档或脚本交互的方式。这里的“源”是由协议,主机名和端口号标示的。同源策略的存在是为了保护用户隐私和安全。 具体来说,同源策略要求:如果两个页面的域名,协议…

    JavaScript 2023年6月11日
    00
  • js中对象和面向对象与Json介绍

    JS中对象和面向对象 JS中的对象是一种复合数据类型,可以存储不同类型的数据,例如数字、布尔值、字符串、数组和函数等。对象以键值对的形式存储数据,每个属性都有一个唯一的键名和对应的值。 面向对象(Object Oriented,简称OO)是一种编程范式,强调将程序中的数据和操作数据的代码组织成一个相互依赖的对象,从而增强程序的可重复性、可维护性等特性。 JS…

    JavaScript 2023年5月27日
    00
  • js局部刷新页面时间具体实现

    实现JS局部刷新页面的两种常见方式是使用JS内置的location.reload()方法和使用AJAX请求后台返回的数据来更新页面。 使用location.reload()方法刷新页面 location.reload()方法可以重新加载当前页面,如果传入参数true则会强制从服务器重新加载页面,但是这种方式会刷新整个页面,无法局部刷新。因此,我们可以通过在J…

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