【JavaScript】Cookies

文章目录

    • 1. 什么是Cookies
    • 2. Cookies的基本属性
    • 3. JavaScript中的Cookies操作
      • 设置Cookies
      • 读取Cookies
      • 获取特定Cookies的值
      • 删除Cookies
    • 4. Cookies的应用场景
      • 记住用户登录状态
      • 存储用户偏好设置
      • 跨页面数据传递
    • 5. 安全性注意事项
    • 6. 总结

在 Web 开发中, Cookies 是一种在客户端存储数据的重要方式,用于在浏览器和服务器之间传递信息。本篇博客将介绍 JavaScript 中 Cookies 的概念、用法以及一些常见的应用场景。

1. 什么是Cookies

Cookies 是存储在用户计算机上的小型文本文件,由浏览器保存。它们包含了一些与特定站点或用户相关的信息,用于在用户访问同一站点时传递和存储数据。

2. Cookies的基本属性

Cookies 通常具有以下基本属性:

  • 名称(Name):Cookies 的唯一标识符
  • 值(Value):与 Cookies 相关联的数据
  • 域(Domain):指定 Cookies 对哪个域名可见
  • 路径(Path):指定 Cookies 对哪个路径可见
  • 过期时间(Expires):指定 Cookies 的过期时间
  • 安全标志(Secure):指定 Cookies 是否仅在使用 SSL 连接时发送到服务器
  • HttpOnly标志(HttpOnly):指定 Cookies 是否仅通过 HTTP 和 HTTPS 协议访问,而不允许通过 JavaScript 访问

3. JavaScript中的Cookies操作

设置Cookies

document.cookie = "username=John Doe; expires=Thu, 18 Dec 2023 12:00:00 UTC; path=/";

在上述例子中,通过 document.cookie来设置 Cookies。可以通过指定 expires 属性来设置 Cookies 的过期时间,通过 path 属性来指定 Cookies 对哪个路径可见。

读取Cookies

let cookies = document.cookie;
console.log("All Cookies:", cookies);

通过 document.cookie 来读取所有 Cookies。返回的是一个字符串,包含了所有 Cookies 的名称和值。

获取特定Cookies的值

function getCookie(name) {let cookies = document.cookie.split(';');for (let cookie of cookies) {let [cookieName, cookieValue] = cookie.trim().split('=');if (cookieName === name) {return cookieValue;}}return null;
}let username = getCookie("username");
console.log("Username:", username);

通过自定义的 getCookie 函数,可以获取特定名称的 Cookies 的值。

删除Cookies

function deleteCookie(name) {document.cookie = `${name}=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;`;
}deleteCookie("username");

通过将 Cookies 的过期时间设置为一个过去的时间,可以实现删除 Cookies 的效果。

4. Cookies的应用场景

记住用户登录状态

通过在 Cookies 中存储用户登录信息,可以实现在用户下次访问时自动登录。

// 登录成功后设置Cookies
document.cookie = "userLoggedIn=true; expires=Thu, 18 Dec 2023 12:00:00 UTC; path=/";// 读取Cookies判断用户是否已登录
let userLoggedIn = getCookie("userLoggedIn");
if (userLoggedIn === "true") {// 用户已登录,执行相应逻辑console.log("User is logged in.");
} else {// 用户未登录,执行相应逻辑console.log("User is not logged in.");
}

存储用户偏好设置

通过 Cookies 存储用户的偏好设置,例如主题颜色、语言等。

// 设置用户偏好颜色
document.cookie = "themeColor=blue; expires=Thu, 18 Dec 2023 12:00:00 UTC; path=/";// 读取Cookies获取用户偏好颜色
let themeColor = getCookie("themeColor");
console.log("Theme Color:", themeColor);

跨页面数据传递

Cookies 可以跨页面共享数据,用于在同一站点的不同页面之间传递信息。

// 在页面1中设置Cookies
document.cookie = "page1Data=123; expires=Thu, 18 Dec 2023 12:00:00 UTC; path=/";// 在页面2中读取Cookies获取数据
let page1Data = getCookie("page1Data");
console.log("Data from Page 1:", page1Data);

5. 安全性注意事项

  • 敏感信息:避免在 Cookies 中存储敏感信息,如密码等
  • 安全标志:对于涉及用户隐私的 Cookies,设置 Secure 标志以确保只在使用 SSL 连接时传输
  • HttpOnly标志:对于存储身份验证信息等关键数据的 Cookies,设置 HttpOnly 标志以防止通过 JavaScript 访问

6. 总结

Cookies 是 Web 开发中常用的数据存储和传递方式,通过 JavaScript 可以方便地进行 Cookies 的设置、读取和删除。Cookies 广泛应用于记住用户登录状态、存储用户偏好设置等场景。但在使用 Cookies 时,需要注意安全性和隐私保护,避免存储敏感信息,并根据需要设置安全标志和 HttpOnly 标志。希望通过本篇博客,你对 JavaScript 中 Cookies 的概念、用法以及一些常见的应用场景有了更深入的了解。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/685519.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

索引失效场景

在数据库系统中,索引用于加速查询处理,但在某些情况下,即使存在索引,数据库查询优化器(Query Optimizer)可能选择不使用它们。这称之为“索引失效”。以下列出了常见的索引失效场景,并进行了解析…

GPU独显下ubuntu屏幕亮度不能调节解决方法

GPU独显下屏幕亮度不能调节(假设你已经安装了合适的nvidia显卡驱动),我试过修改 /etc/default/grub 的 GRUB_CMDLINE_LINUX_DEFAULT"quiet splash acpi_backlightvendor" ,没用。修改和xorg.conf相关的文件,…

不花一分钱,在 Mac 上跑 Windows(M1/M2 版)

这是在 MacOS M1 上体验最新 Windows11 的效果: VMware Fusion,可以运行 Windows、Linux 系统,个人使用 licence 免费 安装流程见 👉 https://zhuanlan.zhihu.com/p/452412091 从申请 Fusion licence 到下载镜像,再到…

MySQL性能调优篇(10)-数据库备份与恢复策略

MySQL数据库备份与恢复策略 数据库备份与恢复是数据库管理中非常重要的一环,对于保障数据的安全性和可靠性起着至关重要的作用。本文将介绍MySQL数据库备份与恢复的策略,包括备份类型、备份方法以及恢复策略。 1. 备份类型 1.1 完整备份 完整备份是备…

安装 Windows Server 2019

1.镜像安装 镜像安装:Windows Server 2019 2.安装过程(直接以图的形式呈现) 先选择""我没有产品密钥"",选择桌面体验 选择自定义 设置密码后继续 安装成功

SpringUtils 工具类,方便在非spring管理环境中获取bean

应用场景: 1 可用在工具类中, 2 spring【Controller,service】环境中, 3 其中的一个方法getAopProxy可获得代理对象,需要将 EnableAspectJAutoProxy(exposeProxy true) 允许获取代理对象 import org.springframework.aop.framew…

07-k8s中secret资源02-玩转secret

一、回顾secret资源的简单实用 第一步:将想要的数据信息【key:value】中的value值,使用base64编码后,写入secret资源清单中; 第二步:创建secret资源; 第三步:pod资源引用secret资源&…

第2讲springsecurity+vue通用权限系统

阿里云 maven阿里云镜像 <?xml version"1.0" encoding"UTF-8"?><!-- Licensed to the Apache Software Foundation (ASF) under one or more contributor license agreements. See the NOTICE file distributed with this work for addition…

MySQL的配置文件my.cnf正常的配置项目

my.cnf&#xff08;或my.ini&#xff09;是MySQL的配置文件&#xff0c;其中包含了多种设置&#xff0c;用于控制MySQL服务器的运行方式。以下是my.cnf中一些常见的配置项目&#xff1a; 服务器设置 - [mysqld]&#xff1a;服务器的配置部分。 - user&#xff1a;指定M…

C++,stl,常用排序算法,常用拷贝和替换算法

目录 1.常用排序算法 sort random_shuffle merge reverse 2.常用拷贝和替换算法 copy replace replace_if swap 1.常用排序算法 sort 默认从小到大排序 #include<bits/stdc.h> using namespace std;int main() {vector<int> v;v.push_back(1);v.push_ba…

速盾网络:cdn加速服务器代理分销

CDN&#xff08;Content Delivery Network&#xff09;是一种分布式网络架构&#xff0c;旨在提供快速、安全和高效的内容传输和分发服务。CDN加速服务器代理分销是指将CDN网络资源转售给其他企业或个人&#xff0c;以帮助他们实现内容加速和分发的目标。 CDN加速服务器代理分…

基于Web技术的家居室内温湿度监测系统

设计一个基于Web技术的家居室内温湿度监测系统涉及前端和后端开发&#xff0c;以及与硬件传感器的集成。以下是一个简单的设计概述&#xff1a; ### 1. 系统架构 - **前端**: 用户界面&#xff0c;用于显示实时数据和历史记录&#xff0c;可通过Web浏览器访问。 - **后端**: 服…

Leetcode 647. 回文子串

题意理解&#xff1a; 给你一个字符串 s &#xff0c;请你统计并返回这个字符串中 回文子串 的数目。 回文字符串 是正着读和倒过来读一样的字符串。 子字符串 是字符串中的由连续字符组成的一个序列。 具有不同开始位置或结束位置的子串&#xff0c;即使是由相同的字符组成&am…

【友塔笔试面试复盘】八边形取反问题

问题&#xff1a;一个八边形每条边都是0&#xff0c;现在有取反操作&#xff0c;选择一条边取反会同时把当前边和2个邻边取反&#xff08;如果是0变为1&#xff0c;如果是1变为0&#xff09; 现在问你怎么取反能使得八条边都变为1. 当时陷入了暴力递归漩涡&#xff0c;给出一个…

问题:内存时序参数 CASLatency 是() #学习方法#微信#微信

问题&#xff1a;内存时序参数 CASLatency 是&#xff08;&#xff09; A&#xff0e;行地址控制器延迟时间 B&#xff0e;列地址至行地址延迟时间 C&#xff0e;列地址控制器预充电时间 D&#xff0e;列动态时间 参考答案如图所示

[职场] 求职如何设置预期 #笔记#经验分享

求职如何设置预期 在求职的道路上&#xff0c;无论处于哪个年龄阶段&#xff0c;合理的就业期望值才能使我们的愿望与社会的需求相吻合&#xff0c;才能让自己在今后的工作中发挥出最大的实力与能力。 一、结合测评软件&#xff0c;明确求职目标 根据霍兰德职业兴趣测试结果&a…

题目:3.神奇的数组(蓝桥OJ 3000)

问题描述&#xff1a; 解题思路&#xff1a; 官方&#xff1a; 我的总结&#xff1a; 利用双指针遍历每个区间并判断是否符合条件&#xff1a;若一个区间符合条件则该区间在其左端点不变的情况下的每一个子区间都符合条件&#xff0c;相反若一个区间内左端点固定情况下有一个以…

asp.net web api 用户身份验证

前后端分离的开发中&#xff0c;应用服务需要进行用户身份的验证才允许访问数据。实现的方法很简单。创建一个webapi项目。在App_Start目录下找到WebApiConfig.cs&#xff0c; 在里面增加一个实现类。 public static class WebApiConfig{public static void Register(HttpConfi…

javax.servlet 和 jakarta.servlet的关系和使用tomcat部署 jakarta.servlet

1&#xff0c;javax.servlet 和 jakarta.servlet的关系 javax.servlet 和 jakarta.servlet 是 Java Servlet API 的两个版本。 Java Servlet API 是由 Sun Microsystems&#xff08;现在是 Oracle&#xff09;开发和维护的&#xff0c;其包名以 javax.servlet 开头。从 Java …

mysql数据库 mvcc

在看MVCC之前我们先补充些基础内容&#xff0c;首先来看下事务的ACID和数据的总体运行流程 数据库整体的使用流程: ACID流程图 mysql核心日志: 在MySQL数据库中有三个非常重要的日志binlog,undolog,redolog. mvcc概念介绍&#xff1a; MVCC&#xff08;Multi-Version Concurr…