文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

一篇文章带你了解JavaScript cookies

2024-12-03 10:11

关注

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

一、什么是Cookies?

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

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

  1. 当用户访问网页时,他的名字可以存储在cookie中。 
  2.  
  3. 下次用户访问页面时,cookie“记住”他的名字。 

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

  1. username = John Doe 

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

二、使用JavaScript创建一个Cookie

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

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

  1. document.cookie = "username=John Doe"

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

  1. document.cookie = "username=John Doe; expires=Thu, 18 Dec 2013 12:00:00 UTC"

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

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

三、使用JavaScript读一个cookie

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

  1. var x = document.cookie; 

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

四、使用JavaScript更改cookie

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

  1. document.cookie = "username=John Smith; expires=Thu, 18 Dec 2013 12:00:00 UTC; path=/"

旧的cookie被覆盖。

五、使用JavaScript删除Cookie

删除cookie非常简单。

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

  1. document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;"

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

六、JavaScript Cookie 实例

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

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

1. 设置cookie值

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

  1. function setCookie(cname, cvalue, exdays) { 
  2.     var d = new Date(); 
  3.     d.setTime(d.getTime() + (exdays*24*60*60*1000)); 
  4.     var expires = "expires="+ d.toUTCString(); 
  5.     document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/"

 

函数解析:

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

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

2. 获得cookie值

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

  1.  

3. 函数检查cookie值

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

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

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

  1. function checkCookie() { 
  2.     var username = getCookie("username"); 
  3.     if (username != "") { 
  4.         alert("Welcome again " + username); 
  5.     } else { 
  6.         username = prompt("Please enter your name:"""); 
  7.         if (username != "" && username != null) { 
  8.             setCookie("username", username, 365); 
  9.         } 
  10.     } 

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

 

七、总结

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

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

本文转载自微信公众号「前端进阶学习交流」,可以通过以下二维码关注。转载本文请联系前端进阶学习交流公众号。

 

来源:前端进阶学习交流内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯