Js操作Cookie基础知识入门_cookie入门知识

介绍Web 服务器和 HTTP 服务器是无状态的,因此当 Web 服务器将网页发送到浏览器时,连接会被断开,服务器会忘记与用户相关的所有内容。那么浏览器和 Web 服务器是怎样记住用户信息的?cookie 被发明出来解决这个问题。当用户访问网页时,他们的名字、唯一 ID 或其他任何信息都可以存储在浏览器的 cookie 中。 当用户下次又回到网页时,cook

Js操作Cookie基础知识入门

介绍

Web 服务器和 HTTP 服务器是无状态的,因此当 Web 服务器将网页发送到浏览器时,连接会被断开,服务器会忘记与用户相关的所有内容。

Js操作Cookie基础知识入门_cookie入门知识

那么浏览器和 Web 服务器是怎样记住用户信息的?cookie 被发明出来解决这个问题。

当用户访问网页时,他们的名字、唯一 ID 或其他任何信息都可以存储在浏览器的 cookie 中。 当用户下次又回到网页时,cookie 将记住他们的名字或唯一 ID。

Cookie 只是存储在计算机浏览器中的小型文本文件。 它们包含以下数据:

  1. 保存数据的 Name-value 对
  2. 日期到期时,该 cookie 失效
  3. 应将其发送到的服务器的域和路径

而cookie也有一些值得一提的限制:

  • 每个cookie的最大为 4096 字节
  • 每个域最多20个cookie(每个浏览器略有不同)
  • Cookie是其自己的域名专用的(网站无法读取其他域的 Cookie,只能是它自己的)
  • 大小限制适用于整个cookie,而不仅仅是它的值

在浏览器中,cookie通过文档对象被公开为 document.cookies。

在下面的章节中,我们将介绍如何用 JavaScript 在浏览器中设置、获取、更新和删除 Cookie 数据。

让我们开始吧!

目录

  • Create Cookies
  • Read Cookies
  • Update Cookies
  • Delete Cookies

Create Cookies

用 JavaScript 在浏览器中设置 cookie 非常简单! 我将在下面向你展示。

设置 Cookie

以下是在浏览器中用 JavaScript 创建新 cookie 的执行代码:

document.cookie = "userId=nick123"

运行该代码后,打开浏览器,你应该能在开发者工具的 Application(Safari 或Chrome)或 Storage(Firefox)中找到该 cookie。

设置 cookie 的过期时间

你还可以向 Cookie 中添加过期时间(UTC),告知浏览器应该在什么时候将其删除:

document.cookie = "userId=nick123; expires=Wed, 15 Jan 2020 12:00:00 UTC"

设置一个 Cookie 路径

你还可以告诉浏览器 cookie 所属的路径(默认值是当前页面的路径):

document.cookie = "userId=nick123; expires=Wed, 15 Jan 2020 12:00:00 UTC; path=/user"

设置 cookie 域

我们将介绍的最后一段数据是 cookie 所属的域(默认为当前域):

document.cookie = "userId=nick123; expires=Wed, 15 Jan 2020 12:00:00 UTC; path=/user; domain=mysite.com"

Read Cookies

通过 document.cookie 对象,用 JavaScript 读取 cookie 也非常简单:

读取单个页面所有的 Cookie

将单个页面的所有 cookie 作为字符串获取,每个 cookie 用分号分隔:

const cookies = document.cookie

读取具有特定名称的Cookie

要访问具有特定名称的 cookie,我们需要获取页面上所有的 cookie 并解析字符串,然后查找我们想要寻找的 cookie 名称的匹配项。

这是一个用正则表达式完成此任务的函数:

function getCookieValue(name) {
  let result = document.cookie.match("(^|[^;]+)\\s*" + name + "\\s*=\\s*([^;]+)")
  return result ? result.pop() : ""
}

你这样使用该函数:

getCookieValue("userId") //returns nick123

这将返回与提供给函数的 name 参数对应的字符串值。

如果你还没有掌握正则表达式,还有另一个同样功能的函数:

function getCookieValue(name) {
  const nameString = name + "="
  
  const value = document.cookie.split(";").filter(item => {
    return item.includes(nameString)
  })
  
  if (value.length) {
    return value[0].substring(nameString.length, value[0].length)
  } else {
    return ""
  }
}

用相同的方法使用该函数:

getCookieValue("userId") //returns nick123

Update Cookies

你可以通过创建的方式用新值覆盖 cookie 来更改它的值。

你可以用此代码覆盖本文前面创建的 cookie “userId” :

document.cookie = "userId=new_value"

当你再次运行 getCookieValue 函数时,将返回新值:

getCookieValue("userId") //returns new_value

Delete Cookies

你可以给 cookie 设置一个空值,并将其过期日期设置为过去的任意时间来删除 cookie。

如果我们想要删除前面例子的 cookie “userId” ,请按以下步骤操作:

document.cookie = "userId=; expires=Thu, 01 Jan 1970 00:00:00 UTC;"

很简单吧?

总结

恭喜!现在你已经知道了如何用 JavaScript 对 cookie 进行设置,读取,更新和删除! 希望这有助于你进行编码工作。

海计划公众号
(0)
上一篇 2020/03/26 23:28
下一篇 2020/03/26 23:28

您可能感兴趣的内容

  • javascript如何定义类?使用帮助_类基础入门

    JavaScript中没有类或接口的概念,即不能直接定义抽象的类,也不能直接实现继承。不过,为了编程的方便,我们可以在JavaScript中模拟类和继承的行为。JavaScript中“定义”类的方法:一、构造函数法这是经典方法,也是教科书必教的方法。它用构造函数模拟”类”,在其内部用this关键字指代实例对象。 function Cat() {this.na

    2020/03/22
  • Javascript怎样提取字符个数?零基础入门_字符教程视频

    javascript中获取字符串的字符个数主要是根据字符串的变量,然后通过.length就可以获取到字符串的长度。JavaScript中可以使用length属性来提取字符个数。length:length 属性返回字符串的长度(字符数)。语法:string.length示例:使用length属性获取字符个数:

    <he

    2020/03/24
  • Git 如何撤回某一次提交?使用帮助_git基础教程

    在 master 分支做了一次 commit ?git add index.js
    git commit -m ‘自以为是在开发分支其实是在master分支的一次提交’
    之前没有出过这样的错误。就算出现也是直接push了然后再 reset 回滚然后再次 push -f。如何合适的解决这种情况reset的三个参数–mixed(默认参数)重置位置的同时,只保留W

    2020/03/26
  • webpack插件ProvidePlugin的使用方法和eslint配置小白知识_插件基础知识教程

    配置 webpack.config.js文件里 plugins 属性new webpack.ProvidePlugin({identifier: ‘module-name’,// …etc
    });示例用法:new webpack.ProvidePlugin({‘_’: ‘lodash’
    });配置完以后就可以在代码里直接使用 _ ,而不再需要 impor

    2020/03/24
  • 通过focusout事件解决IOS键盘收起时界面不归位的问题小白教程_键盘基础知识教程

    问题症状今天在开发一个移动端的 H5 页面时,遇到了 IOS 上键盘收起时界面无法归位的问题。下面详细描述下问题和症状:页面结构出问题的页面是一个表单结构。即类似于一个 div 下有4个 input 表单的结构,用于用户填写邮寄信息。类似:<input type="

    2020/03/29
  • 程序员表白代码小白帮助_程序员小白知识

    许多程序员小伙伴总是苦于找不到合适的告白方式。小编特地收集了一些程序员专属的告白方式与大家分享,一起看看程序员用代码敲出的浪漫吧~I Love You Batch le送她一个惊喜怎么样?情人节向她示爱,让她的电脑自动关机,然后显示你的表白留言。具体操作如下:1.创建一个新的文本文件。2.将以下代码复制到新创建的文件中@echo off
    msg * I LO

    2020/03/30
  • Auto-Layout小白帮助_Sketch的自动布局

    Auto-Layout小白帮助 官方网址:https://animaapp.github.io/Auto-Layout GitHub:https://github.com/Anim…

    2020/03/10
  • 程序员的职场晋升,别人为什么总比你走得快?入门基础教程_职场使用指南

    阅读前请先思考:你最重要的竞争力是什么?你为何焦虑?每个程序员心里多多少少都有一个成为技术大牛的梦,毕竟梦想总是要有的,万一实现了呢?奇葩说第五季里有一期辩题是《高薪不喜欢的还是低薪喜欢的工作,你选哪一个?》在所有人的发言中,蔡康永的一句话最让人触动:不管怎样,选一份能让自己持续成长的工作。如何才能持续成长,是每一个程序员都绕不开的话题。每年大量涌入刚毕业的

    2020/03/30
  • validator.js入门百科领先的表单验证解决方案

    validator.js基础入门 官方网址:https://validator.niceue.com GitHub:https://github.com/niceue/nice-v…

    2020/03/05
  • Two.js使用帮助_面向现代 Web 浏览器的一个二维绘图 API

    Two.js使用帮助 官方网址:https://two.js.org GitHub:https://github.com/jonobr1/two.js 简介描述:面向现代 Web …

    2020/03/06
  • Css媒体查询以及常用设置菜鸟教程_媒体查询小白常识

    前言页面为了适应各种设备(PC端、移动端的不同设备)的不同显示情况,增加了媒体查询的功能,通过特定的要求达到不同的样式显示。媒体查询@media 媒体类型 and|not|only (媒体特性){/*css样式*/

    或者<link rel="stylesheet" media="mediatype and|not|only (media feature)

    2020/03/24
  • CSS如何设置透明度?小白入门_透明小白攻略

    怎样用CSS样式表来设置DIV的透明半透明?首先说一下设置DIV半透明的CSS代码:div{filter:alpha(Opacity=80);-moz-opacity:0.5;opacity: 0.5;}说明:1、filter:对win IE设置半透明滤镜效果,filter:alpha(Opacity=80)代表该对象80%半透明,火狐浏览器不认。2、-mo

    2020/03/26
  • JQuery 自动触发事件小白攻略_jquery基础入门

    常用模拟有时候,需要通过模拟用户操作,来达到单击的效果。例如在用户进入页面后,就触发click事件,而不需要用户去主动单击。在JQuery中,可以使用trigger()方法完成模拟操作。例如可以使用下面的代码来触发id为btn的按钮的click事件。$(‘#btn’).trigger(“click”);这样,当页面加载完毕后,就会立刻输出想要的效果。也可以直

    2020/04/05
  • setTimeout和setInterval实现倒计时的区别基础知识入门_区别小白入门

    前言这是一个由于倒计时插件出现bug而出现的文章,导致我努力去寻找这个原因的源头,最后终于发现了新大陆(先事先展示一下新大陆的结论):setTimeout和setInterval都有误差以1秒为例,setInterval会每次准时在1秒钟的时候将微任务推入主任务队列,导致如果某次本该在时间(1s=1000ms)1998ms的时候改变数据,但是变成2000ms

    2020/03/20
  • 实践出真知使用帮助_实践菜鸟知识

    在工作当中,总是避免不了要学习新技术,应用新技术,为了避免使用中的一些问题,需要对技术提前做一些准备,名为调研,调查研究挺有意思的一个词。新技术调研是有一定工作经验后,一定会遇到的一个工作,没有经验时确实还是挺具有挑战的一件事。做一件事要思考方式方法,闷头去做不是一种好的方式。一个新技术直接去看源代码是不可取的,一下子掉入细节的汪洋大海,不是一种好的方式。直

    2020/03/20
  • VisBug基础知识_浏览器对 Web 页进行设计调整的 Chrome 扩展插件

    VisBug基础知识 官方网址:https://visbug.page.link/extension GitHub:https://github.com/GoogleChromeL…

    2020/03/06