前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >一篇文章带你了解JavaScript cookies

一篇文章带你了解JavaScript cookies

作者头像
前端进阶者
发布2021-03-19 14:31:22
7090
发布2021-03-19 14:31:22
举报
文章被收录于专栏:前端进阶交流前端进阶交流

已似长沙傅,从今又几年。

Cookies 让你在网页中存储用户信息。

一、什么是Cookies?

Cookie是数据,存储在小文本文件中,在计算机上。

当Web服务器向浏览器发送网页时,连接被关闭,服务器会忘记用户的一切。Cookie是为了解决“如何记住用户信息”而发明的。

代码语言:javascript
复制
当用户访问网页时,他的名字可以存储在cookie中。

下次用户访问页面时,cookie“记住”他的名字。

Cookie保存在名称值(name:value)对中。

代码语言:javascript
复制
username = John Doe

当浏览器从服务器请求一个网页时,将属于该页的cookie添加到该请求中。这样服务器就获得了必要的数据来“记住”用户的信息。

二、使用JavaScript创建一个Cookie

JavaScript可以创建、读取、删除cookie,用document.cookie属性。

使用JavaScript,Cookie可以像这样创建:

代码语言:javascript
复制
document.cookie = "username=John Doe";

可以添加一个到期日期(UTC时间)。默认情况下,在浏览器关闭时删除cookie:

代码语言:javascript
复制
document.cookie = "username=John Doe; expires=Thu, 18 Dec 2013 12:00:00 UTC";

使用路径参数,您可以告诉浏览器cookie属于什么路径。默认情况下,cookie属于当前页。

代码语言:javascript
复制
document.cookie = "username=John Doe; expires=Thu, 18 Dec 2013 12:00:00 UTC; path=/";

三、使用JavaScript读一个cookie

使用JavaScript,cookie可以这样读取。

代码语言:javascript
复制
var x = document.cookie;

document.cookie 将返回所有cookie在一个字符串。像: cookie1=value; cookie2=value;cookie3=value;

四、使用JavaScript更改cookie

使用JavaScript, 你可以修改cookie,像使用创建它的方法一样。

代码语言:javascript
复制
document.cookie = "username=John Smith; expires=Thu, 18 Dec 2013 12:00:00 UTC; path=/";

旧的cookie被覆盖。

五、使用JavaScript删除Cookie

删除cookie非常简单。

删除cookie时不必指定cookie值,只需将过期参数设置为已过期的日期。

代码语言:javascript
复制
document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";

应该定义cookie路径以确保删除正确的cookie。如果不指定路径,一些浏览器不会让你删除cookie。

六、JavaScript Cookie 实例

将创建一个cookie来存储访问者的名称,访客第一次到达网页时,会要求他填写姓名。然后将该名称存储在cookie中。

下次访客到达同一页时,他会收到一封欢迎消息。

1. 设置cookie值

首先,创建一个函数,将访问者的名字存储在cookie变量中。

代码语言:javascript
复制
function setCookie(cname, cvalue, exdays) {
    var d = new Date();
    d.setTime(d.getTime() + (exdays*24*60*60*1000));
    var expires = "expires="+ d.toUTCString();
    document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}

函数解析:

上面函数的三个参数分别是:cookie的名称(cname),cookie的值(cvalue),还有cookie过期的天数。

函数根据参数创建cookie并设置过期参数。

2. 获得cookie值

然后,创建一个函数返回指定cookie的值:

代码语言:javascript
复制
<script>
getCookie("username");

function getCookie(cname) {
  var allcookies = document.cookie;
  cookieArr = allcookies.split(';');

  for(var i = 0; i < cookieArr.length; i++) {
     var cookiePair = cookieArr[i].split("=");
     if(cname == cookiePair[0].trim()) {
        document.write ("Key is: " + cookiePair[0] + " and Value is: " + cookiePair[1]);
     }
  }
}
</script>
3. 函数检查cookie值

最后,创建检查cookie是否设置的函数。

如果cookie被设置,它将显示一个问候。

如果没有设置Cookie,它会显示一个提示框,询问用户的名字,通过调用setCookie函数,并存储用户名cookie365天。

代码语言:javascript
复制
function checkCookie() {
    var username = getCookie("username");
    if (username != "") {
        alert("Welcome again " + username);
    } else {
        username = prompt("Please enter your name:", "");
        if (username != "" && username != null) {
            setCookie("username", username, 365);
        }
    }
}

两者合在一起效果展示。:

七、总结

本文基于JavaScript 基础。主要介绍了浏览器中的cookies应该如何去调用,如何去创建自己的cookies,(设置cookies 获取cookies。检查cookies)等等一系列常见的问题都做了详细的讲解。

希望能够帮助读者更好的学习。

------------------- End -------------------

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2021-03-09,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 前端进阶学习交流 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 一、什么是Cookies?
  • 二、使用JavaScript创建一个Cookie
  • 三、使用JavaScript读一个cookie
  • 四、使用JavaScript更改cookie
  • 五、使用JavaScript删除Cookie
  • 六、JavaScript Cookie 实例
    • 1. 设置cookie值
      • 2. 获得cookie值
        • 3. 函数检查cookie值
        • 七、总结
        相关产品与服务
        对象存储
        对象存储(Cloud Object Storage,COS)是由腾讯云推出的无目录层次结构、无数据格式限制,可容纳海量数据且支持 HTTP/HTTPS 协议访问的分布式存储服务。腾讯云 COS 的存储桶空间无容量上限,无需分区管理,适用于 CDN 数据分发、数据万象处理或大数据计算与分析的数据湖等多种场景。
        领券
        问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档