search
HomeWeb Front-endJS TutorialHow to set cookies in the front end

This time I will show you how to set cookies in the front-end, and what are the precautions for setting cookies in the front-end. The following is a practical case, let's take a look.

cookie

What it is: It is a means of storing information on the client's hard drive.

Why use? : Can be used to store some information and achieve some special effects. For example, you can avoid logging in for a certain number of days, or store some small data.

The meaning of some fields in cookie:

  1. key=value (key=value) is a key-value pair of cookie, usually obtained based on key The corresponding value

  2. expires (expiration time) sets the expiration time of the cookie, also separated by ';', expires=GMT timeString, For example, if you want to avoid logging in for 30 days, you can set the expiration date to a date 30 days from today. If the expiration time is not set, the browser will close the cookie and disappear by default.

  3. path (path) cookie cannot be obtained everywhere. The website is divided into many directories. Cookies may not be used in many directories, so you can set the cookie path, which is more secure and prevents any directory from accessing the cookie. Pass path=/E:javascript/test so that the cookie can only be obtained in this directory

  4. ##domain (domain) By default, the cookie is where the cookie is It can only be accessed under the domain name, but sometimes a.chaijinsong.com needs to access the cookie under b.chaijinsong.com. In this case, domain=chaijinsong.com needs to be set. In this way, both subdomain names can access the cookie

  5. secure (security) The default secure is false, that is, it is transmitted through the http protocol, but if secure=true, it can only tTransmission through https

How to use? :
document.cookie; //获取cookie
"aaa=aaa;bbb=bbb" //类似于这种格式,但是并不是字符串。
//设置cookie,也可以用来进行删除cookie,即将过期时间设置为过去的时间,最后一个参数可以传负数来实现
function setCookie(cname,cvalue,exdays){
  var d = new Date();
  d.setTime(d.getTime()+(exdays*24*60*60*1000));
  var expires = "expires="+d.toGMTString();
  document.cookie = cname + "=" + cvalue + "; " + expires;
}
setCookie('cjs','cjs',30); //设置 name为cjs,value为cjs的一个cookie,并且时间为30天。
setCookie('cjs','cjs',-1); //让该cookie过期,然后在document.cookie中就没有cjs=cjs这个cookie了。但是其他key=value还存在
//获取某个key的cookie
function getCookie(key){
    let arr1 = document.cookie.split(';');
    for(let i=0;i<arr1.length getcookie></arr1.length>
Note: It is not allowed to directly assign values ​​to cookies by opening local HTML files on Google browser, but Firefox can. So if you want to test, first open a local server and then use the local IP to access the file. Perform cookie operations.

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to the php Chinese website

Other related articles!

Recommended reading:

Use CSS to realize table tennis fighting animation

Use CSS to realize table tennis fighting animation

The above is the detailed content of How to set cookies in the front end. For more information, please follow other related articles on the PHP Chinese website!

Statement
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
修复:谷歌浏览器请求太多错误 429 [已解决]修复:谷歌浏览器请求太多错误 429 [已解决]Apr 16, 2023 am 09:22 AM

近期很多Windows用户反映,当他们尝试访问某个URL时,PC上的GoogleChrome浏览器显示错误429。这是因为每次用户尝试在短时间内通过浏览器。通常,此错误是由网站生成的,以避免通过向服务器发送过多请求而被机器人或黑客入侵病毒。用户对在这个阶段可以做什么感到困惑,并因此感到失望。导致此错误的因素可能很多,我们在下面列出了其中一些因素。缓存内存和其他站点数据未清除从第三方来源安装的扩展系统上的一些有害软件病毒攻击在研究了上面列出的因素之后,我们在这篇文章中收集了一些修复程序,这

如果 Grammarly 无法在 Windows 10 浏览器上运行的 8 个重大修复如果 Grammarly 无法在 Windows 10 浏览器上运行的 8 个重大修复May 05, 2023 pm 02:16 PM

如果您在Windows10或11PC上遇到语法问题,本文将帮助您解决此问题。Grammarly是最流行的打字助手之一,用于修复语法、拼写、清晰度等。它已经成为写作专业人士必不可少的一部分。但是,如果它不能正常工作,它可能是一个非常令人沮丧的体验。许多Windows用户报告说此工具在他们的计算机上运行不佳。我们做了深入的分析,找到了这个问题的原因和解决方案。为什么Grammarly无法在我的PC上运行?由于几个常见原因,PC上的Grammarly可能无法正常工作。它包括以下内

如何修复 Google Chrome 上的 Roblox 403 禁止错误如何修复 Google Chrome 上的 Roblox 403 禁止错误May 19, 2023 pm 01:49 PM

许多Windows用户最近在尝试访问GoogleChrome浏览器中的网站URL时遇到了一个不寻常的错误,称为Roblox403禁止错误。即使在多次重新启动Chrome应用程序后,他们也无能为力。此错误可能有几个潜在原因,我们在下面概述并列出了其中一些。Chrome的浏览历史和其他缓存以及损坏的数据不稳定的互联网连接网站网址不正确从第三方来源安装的扩展在考虑了上述所有方面之后,我们提出了一些修复程序,可以帮助用户解决此问题。如果您遇到同样的问题,请查看本文中的解决方案。修复1

vue3中cookie如何使用vue3中cookie如何使用May 12, 2023 pm 02:19 PM

前言cookie使用最多的地方想必是保存用户的账号与密码,可以避免用户每次登录时都要重新输入1.vue中cookie的安装在终端中输入命令npminstallvue-cookies--save,即可安装cookies,安装之后在main.js文件中写下以下代码import{createApp}from&#39;vue&#39;importVueCookiesfrom&#39;vue-cookies&#39;constapp=createApp(App)app.co

如何在 Google Chrome 中启用或禁用第三方 Cookie如何在 Google Chrome 中启用或禁用第三方 CookieApr 15, 2023 pm 02:07 PM

每个网站都通过创建cookie使用户更容易浏览他们的网页和浏览他们的网站。然而,网站创建了一些第三方cookie,使他们能够跟踪访问其他网站的用户,以便更好地了解他们,从而有助于展示广告和其他帖子。一些用户可能认为他们的数据遭到破坏或存在安全风险,而另一些用户可能认为允许这些第三方cookie跟踪他们以在浏览器上获取更多内容是很好的。所以我们在这篇文章中解释了如何在谷歌浏览器中启用或禁用第三方cookies,详细步骤如下。如何在GoogleChrome中启用第三方Cookie如果您认为要

PHP8.0中的Cookie库PHP8.0中的Cookie库May 14, 2023 pm 04:51 PM

在互联网应用开发中,使用Cookie是常见的一种方式来维护用户会话状态。在PHP语言中,处理Cookie的相关功能在语言的核心库中得到了完善的支持,在最新的PHP8.0版本中,Cookie库得到了进一步的增强。一、PHP中的CookieCookie是一个小文本文件,可以存储在用户的浏览器中,它通常被用来记录用户的个性化设置、登录状态等信息。Cookie是基

php curl怎么设置cookiephp curl怎么设置cookieSep 26, 2021 am 09:27 AM

php curl设置cookie的方法:1、创建PHP示例文件;2、通过“curl_setopt”函数设置cURL传输选项;3、在CURL中传递cookie即可。

如何在ThinkPHP6中使用Cookie技术实现记住我功能如何在ThinkPHP6中使用Cookie技术实现记住我功能Jun 20, 2023 pm 03:33 PM

随着互联网技术的不断发展,越来越多的网站需要用户登录才能使用其功能。但是每次用户访问时都需要输入账号密码显然很不方便,因此“记住我”的功能应运而生。本文将介绍如何在ThinkPHP6中采用Cookie技术实现记住我功能。一、Cookie简介Cookie是一种服务器向客户端发送的小文件,在用户访问网站时存储在用户的计算机上。这些文件包含与用户相关的信息,如登录

See all articles

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

Hot Tools

SAP NetWeaver Server Adapter for Eclipse

SAP NetWeaver Server Adapter for Eclipse

Integrate Eclipse with SAP NetWeaver application server.

SublimeText3 Linux new version

SublimeText3 Linux new version

SublimeText3 Linux latest version

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use