浏览器百科:网页存储篇-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

相关文章

C# WinForms存储过程操作数据库的实例讲解

《C#WinForms存储过程操作数据库的实例讲解》:本文主要介绍C#WinForms存储过程操作数据库的实例,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录一、存储过程基础二、C# 调用流程1. 数据库连接配置2. 执行存储过程(增删改)3. 查询数据三、事务处

springboot security验证码的登录实例

《springbootsecurity验证码的登录实例》:本文主要介绍springbootsecurity验证码的登录实例,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,... 目录前言代码示例引入依赖定义验证码生成器定义获取验证码及认证接口测试获取验证码登录总结前言在spring

Python中随机休眠技术原理与应用详解

《Python中随机休眠技术原理与应用详解》在编程中,让程序暂停执行特定时间是常见需求,当需要引入不确定性时,随机休眠就成为关键技巧,下面我们就来看看Python中随机休眠技术的具体实现与应用吧... 目录引言一、实现原理与基础方法1.1 核心函数解析1.2 基础实现模板1.3 整数版实现二、典型应用场景2

tomcat多实例部署的项目实践

《tomcat多实例部署的项目实践》Tomcat多实例是指在一台设备上运行多个Tomcat服务,这些Tomcat相互独立,本文主要介绍了tomcat多实例部署的项目实践,具有一定的参考价值,感兴趣的可... 目录1.创建项目目录,测试文China编程件2js.创建实例的安装目录3.准备实例的配置文件4.编辑实例的

python+opencv处理颜色之将目标颜色转换实例代码

《python+opencv处理颜色之将目标颜色转换实例代码》OpenCV是一个的跨平台计算机视觉库,可以运行在Linux、Windows和MacOS操作系统上,:本文主要介绍python+ope... 目录下面是代码+ 效果 + 解释转HSV: 关于颜色总是要转HSV的掩膜再标注总结 目标:将红色的部分滤

Python Dash框架在数据可视化仪表板中的应用与实践记录

《PythonDash框架在数据可视化仪表板中的应用与实践记录》Python的PlotlyDash库提供了一种简便且强大的方式来构建和展示互动式数据仪表板,本篇文章将深入探讨如何使用Dash设计一... 目录python Dash框架在数据可视化仪表板中的应用与实践1. 什么是Plotly Dash?1.1

使用Python实现获取网页指定内容

《使用Python实现获取网页指定内容》在当今互联网时代,网页数据抓取是一项非常重要的技能,本文将带你从零开始学习如何使用Python获取网页中的指定内容,希望对大家有所帮助... 目录引言1. 网页抓取的基本概念2. python中的网页抓取库3. 安装必要的库4. 发送HTTP请求并获取网页内容5. 解

Android Kotlin 高阶函数详解及其在协程中的应用小结

《AndroidKotlin高阶函数详解及其在协程中的应用小结》高阶函数是Kotlin中的一个重要特性,它能够将函数作为一等公民(First-ClassCitizen),使得代码更加简洁、灵活和可... 目录1. 引言2. 什么是高阶函数?3. 高阶函数的基础用法3.1 传递函数作为参数3.2 Lambda

Python使用DrissionPage中ChromiumPage进行自动化网页操作

《Python使用DrissionPage中ChromiumPage进行自动化网页操作》DrissionPage作为一款轻量级且功能强大的浏览器自动化库,为开发者提供了丰富的功能支持,本文将使用Dri... 目录前言一、ChromiumPage基础操作1.初始化Drission 和 ChromiumPage

Java中&和&&以及|和||的区别、应用场景和代码示例

《Java中&和&&以及|和||的区别、应用场景和代码示例》:本文主要介绍Java中的逻辑运算符&、&&、|和||的区别,包括它们在布尔和整数类型上的应用,文中通过代码介绍的非常详细,需要的朋友可... 目录前言1. & 和 &&代码示例2. | 和 ||代码示例3. 为什么要使用 & 和 | 而不是总是使