浏览器百科:网页存储篇-Cookie应用实例(三)

2024-09-03 11:52

本文主要是介绍浏览器百科:网页存储篇-Cookie应用实例(三),希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

1.引言

在前面的章节中,我们详细介绍了 Cookie 的基本概念、属性以及如何在 Chrome 浏览器中管理和调试 Cookie。理解这些理论知识之后,下一步是将其应用于实际开发中。在本篇文章中,我们将通过具体的代码示例,演示如何在网页中设置、读取和删除 Cookie,帮助开发者更好地掌握 Cookie 的实际使用方法。通过这些实战演示,您将能够在自己的项目中灵活运用 Cookie,为用户提供更个性化和连续性的浏览体验。

2.Cookie应用实例

首先,我们使用 Vue 3 和 TypeScript 实现了一个简单的网页应用,用于设置和清除浏览器中的 Cookie。其功能概括如下:

  • 用户在表单中输入 Cookie 的名称、值以及有效天数。
  • 点击“Set Cookie”按钮后,计算 Cookie 的过期时间并设置Cookie,成功后会弹出提示框通知用户 Cookie 已成功设置。
  • 点击“Clear Cookie”按钮后,脚本会遍历并删除所有当前域的 Cookie,成功后会弹出提示框通知用户所有 Cookie 已清除。
  • 点击“Clear Cookie by Name ”按钮后,删除指定名称的 Cookie,并显示成功消息。

2.1 主要代码

<script setup lang="ts">
import { ref } from 'vue'const name = ref('')
const value = ref('')
const days = ref(1)
const setCookie = () => {const d = new Date()d.setTime(d.getTime() + (days.value * 24 * 60 * 60 * 1000))const expires = `expires=${d.toUTCString()}`document.cookie = `${name.value}=${value.value};${expires};path=/`alert('Cookie set successfully!')
}const clearAllCookie = () =>{const cookies = document.cookie.split(";")for (let i = 0; i < cookies.length; i++) {const cookie = cookies[i]const eqPos = cookie.indexOf("=")const name = eqPos > -1 ? cookie.substr(0, eqPos) : cookiedocument.cookie = name + "=;expires=Thu, 01 Jan 1970 00:00:00 UTC;path=/"}alert('All cookies cleared successfully!')
}const clearCookieByName = () => {document.cookie = `${name.value}=;expires=Thu, 01 Jan 1970 00:00:00 UTC;path=/`alert(`Cookie with name ${name.value} cleared successfully!`)
}
</script>
<template><div><h1>Cookie-test</h1><form @submit.prevent="setCookie"><div><label for="name">Name:</label><input type="text" id="name" v-model="name" required /></div><div><label for="value">Value:</label><input type="text" id="value" v-model="value" required /></div><div><label for="days">Days to Expire:</label><input type="number" id="days" v-model="days" required /></div><div class="button"><button type="submit">Set Cookie</button><button type="button" @click="clearAllCookie">Clear Cookie</button><button type="button" @click="clearCookieByName">Clear Cookie by Name</button></div></form></div></template>
<style scoped>
label {display: inline-block;width: 150px;
}input {margin-bottom: 10px;width: 300px;height: 35px;border-radius: 5px;
}button {margin-top: 10px;background-color: rgb(66, 164, 255);color: #ffffff;border: #ffffff;margin-left: 25px;
}button:hover {background-color: rgb(131, 186, 245);
}
</style>

执行命令来运行程序:

npm run dev

2.2 访问http://localhost:5173/

3.进行测试

3.1 设置多个Cookie

💡

Cookie的Name唯一

打开Cookie窗格进行查看是否设置成功:

3.2 清除指定Cookie

此时,打开Cookie窗格进行查看是否删除成功:

3.3 清除所有Cookie

此时,打开Cookie窗格进行查看是否删除成功:

4.总结

通过上述实例,我们展示了如何使用 Vue 3 和 TypeScript 在网页中设置、读取和删除 Cookie。理解这些操作后,您可以在自己的项目中灵活运用 Cookie,为用户提供更加个性化的服务。下一篇文章将介绍网页存储的另一种方式——localStorage 的基本概念和应用实例。敬请期待《浏览器百科:网页存储篇 - localStorage介绍(四)》。

这篇关于浏览器百科:网页存储篇-Cookie应用实例(三)的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1132896

相关文章

python获取网页表格的多种方法汇总

《python获取网页表格的多种方法汇总》我们在网页上看到很多的表格,如果要获取里面的数据或者转化成其他格式,就需要将表格获取下来并进行整理,在Python中,获取网页表格的方法有多种,下面就跟随小编... 目录1. 使用Pandas的read_html2. 使用BeautifulSoup和pandas3.

SpringBoot UserAgentUtils获取用户浏览器的用法

《SpringBootUserAgentUtils获取用户浏览器的用法》UserAgentUtils是于处理用户代理(User-Agent)字符串的工具类,一般用于解析和处理浏览器、操作系统以及设备... 目录介绍效果图依赖封装客户端工具封装IP工具实体类获取设备信息入库介绍UserAgentUtils

C语言中位操作的实际应用举例

《C语言中位操作的实际应用举例》:本文主要介绍C语言中位操作的实际应用,总结了位操作的使用场景,并指出了需要注意的问题,如可读性、平台依赖性和溢出风险,文中通过代码介绍的非常详细,需要的朋友可以参... 目录1. 嵌入式系统与硬件寄存器操作2. 网络协议解析3. 图像处理与颜色编码4. 高效处理布尔标志集合

关于MongoDB图片URL存储异常问题以及解决

《关于MongoDB图片URL存储异常问题以及解决》:本文主要介绍关于MongoDB图片URL存储异常问题以及解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐... 目录MongoDB图片URL存储异常问题项目场景问题描述原因分析解决方案预防措施js总结MongoDB图

Java中的Lambda表达式及其应用小结

《Java中的Lambda表达式及其应用小结》Java中的Lambda表达式是一项极具创新性的特性,它使得Java代码更加简洁和高效,尤其是在集合操作和并行处理方面,:本文主要介绍Java中的La... 目录前言1. 什么是Lambda表达式?2. Lambda表达式的基本语法例子1:最简单的Lambda表

Python结合PyWebView库打造跨平台桌面应用

《Python结合PyWebView库打造跨平台桌面应用》随着Web技术的发展,将HTML/CSS/JavaScript与Python结合构建桌面应用成为可能,本文将系统讲解如何使用PyWebView... 目录一、技术原理与优势分析1.1 架构原理1.2 核心优势二、开发环境搭建2.1 安装依赖2.2 验

Java字符串操作技巧之语法、示例与应用场景分析

《Java字符串操作技巧之语法、示例与应用场景分析》在Java算法题和日常开发中,字符串处理是必备的核心技能,本文全面梳理Java中字符串的常用操作语法,结合代码示例、应用场景和避坑指南,可快速掌握字... 目录引言1. 基础操作1.1 创建字符串1.2 获取长度1.3 访问字符2. 字符串处理2.1 子字

Vue3组件中getCurrentInstance()获取App实例,但是返回null的解决方案

《Vue3组件中getCurrentInstance()获取App实例,但是返回null的解决方案》:本文主要介绍Vue3组件中getCurrentInstance()获取App实例,但是返回nu... 目录vue3组件中getCurrentInstajavascriptnce()获取App实例,但是返回n

SQL表间关联查询实例详解

《SQL表间关联查询实例详解》本文主要讲解SQL语句中常用的表间关联查询方式,包括:左连接(leftjoin)、右连接(rightjoin)、全连接(fulljoin)、内连接(innerjoin)、... 目录简介样例准备左外连接右外连接全外连接内连接交叉连接自然连接简介本文主要讲解SQL语句中常用的表

SpringShell命令行之交互式Shell应用开发方式

《SpringShell命令行之交互式Shell应用开发方式》本文将深入探讨SpringShell的核心特性、实现方式及应用场景,帮助开发者掌握这一强大工具,具有很好的参考价值,希望对大家有所帮助,如... 目录引言一、Spring Shell概述二、创建命令类三、命令参数处理四、命令分组与帮助系统五、自定