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

相关文章

Redis中Stream详解及应用小结

《Redis中Stream详解及应用小结》RedisStreams是Redis5.0引入的新功能,提供了一种类似于传统消息队列的机制,但具有更高的灵活性和可扩展性,本文给大家介绍Redis中Strea... 目录1. Redis Stream 概述2. Redis Stream 的基本操作2.1. XADD

JSONArray在Java中的应用操作实例

《JSONArray在Java中的应用操作实例》JSONArray是org.json库用于处理JSON数组的类,可将Java对象(Map/List)转换为JSON格式,提供增删改查等操作,适用于前后端... 目录1. jsONArray定义与功能1.1 JSONArray概念阐释1.1.1 什么是JSONA

nginx -t、nginx -s stop 和 nginx -s reload 命令的详细解析(结合应用场景)

《nginx-t、nginx-sstop和nginx-sreload命令的详细解析(结合应用场景)》本文解析Nginx的-t、-sstop、-sreload命令,分别用于配置语法检... 以下是关于 nginx -t、nginx -s stop 和 nginx -s reload 命令的详细解析,结合实际应

SpringBoot3.X 整合 MinIO 存储原生方案

《SpringBoot3.X整合MinIO存储原生方案》本文详细介绍了SpringBoot3.X整合MinIO的原生方案,从环境搭建到核心功能实现,涵盖了文件上传、下载、删除等常用操作,并补充了... 目录SpringBoot3.X整合MinIO存储原生方案:从环境搭建到实战开发一、前言:为什么选择MinI

MySQL中的LENGTH()函数用法详解与实例分析

《MySQL中的LENGTH()函数用法详解与实例分析》MySQLLENGTH()函数用于计算字符串的字节长度,区别于CHAR_LENGTH()的字符长度,适用于多字节字符集(如UTF-8)的数据验证... 目录1. LENGTH()函数的基本语法2. LENGTH()函数的返回值2.1 示例1:计算字符串

PostgreSQL的扩展dict_int应用案例解析

《PostgreSQL的扩展dict_int应用案例解析》dict_int扩展为PostgreSQL提供了专业的整数文本处理能力,特别适合需要精确处理数字内容的搜索场景,本文给大家介绍PostgreS... 目录PostgreSQL的扩展dict_int一、扩展概述二、核心功能三、安装与启用四、字典配置方法

Python设置Cookie永不超时的详细指南

《Python设置Cookie永不超时的详细指南》Cookie是一种存储在用户浏览器中的小型数据片段,用于记录用户的登录状态、偏好设置等信息,下面小编就来和大家详细讲讲Python如何设置Cookie... 目录一、Cookie的作用与重要性二、Cookie过期的原因三、实现Cookie永不超时的方法(一)

Python实现对阿里云OSS对象存储的操作详解

《Python实现对阿里云OSS对象存储的操作详解》这篇文章主要为大家详细介绍了Python实现对阿里云OSS对象存储的操作相关知识,包括连接,上传,下载,列举等功能,感兴趣的小伙伴可以了解下... 目录一、直接使用代码二、详细使用1. 环境准备2. 初始化配置3. bucket配置创建4. 文件上传到os

Python中re模块结合正则表达式的实际应用案例

《Python中re模块结合正则表达式的实际应用案例》Python中的re模块是用于处理正则表达式的强大工具,正则表达式是一种用来匹配字符串的模式,它可以在文本中搜索和匹配特定的字符串模式,这篇文章主... 目录前言re模块常用函数一、查看文本中是否包含 A 或 B 字符串二、替换多个关键词为统一格式三、提

Java MQTT实战应用

《JavaMQTT实战应用》本文详解MQTT协议,涵盖其发布/订阅机制、低功耗高效特性、三种服务质量等级(QoS0/1/2),以及客户端、代理、主题的核心概念,最后提供Linux部署教程、Sprin... 目录一、MQTT协议二、MQTT优点三、三种服务质量等级四、客户端、代理、主题1. 客户端(Clien