0

0

javascript怎么设置cookie

青灯夜游

青灯夜游

发布时间:2021-04-19 13:52:45

|

20971人浏览过

|

来源于php中文网

原创

在javascript中,可以使用document对象的cookie属性来设置、读取或删除cookie,语法“document.cookie="cookiename=value;expires=过期时间";”。

javascript怎么设置cookie

本教程操作环境:windows7系统、javascript1.8.5版、Dell G3电脑。

1,什么是cookie

    把web页面加载到浏览器所使用的HTTP是一种"无状态"协议,也就是说,当服务器把页面发送给浏览器之后,它就认为事物完成了,并不保存任何信息。这给在浏览器会话期间维持某种连续性带来了困难,比如记录用户已经访问或下载过哪些内容,或是记录用户在私有区域的登录状态。

    cookie就是解决这个问题的一个途径。举例来说,cookie可以记录用户的最后一次访问,保存用户偏好设置的列表,或是当用户继续购物时保存购物车里的物品。在正确使用的情况下,cookie能够改善站点的用户体验。

立即学习Java免费学习笔记(深入)”;

    cookie本身是一些短小的信息串,能够由页面保存在用户的计算机上,然后可以被其他页面读取。cookie一般都设置为在一定时间后失效。

cookie的局限

    浏览器对于能保存的cookie数量有所限制,通常是几百个或多一点。一般情况下,每个域名20个cookies是允许的,而每个域最多能保存4KB的cookie。

    除了大小限制可能导致的问题,有很多原因都可能导致硬盘上的cookie消失,比如到达有效期了,或是用户清理cookie信息了,或是换用其他浏览器了。因此,永远都不应该使用cookie保存重要数据,而且在编写代码时一定要考虑到不能获取到所期望cookie时的情况

2,document.cookie属性

JavaScript使用document对象的cookie属性来创建 、读取及删除cookie。

每个cookie基本上就是一个由成对的名称和值组成的字符串,像下面这样:

username=sam

    当页面加载到浏览器里,浏览器会收集与页面相关的全部cookie,放到类似字符串的document.cookie属性里。在这个属性里,每个cookie是以分号分隔的:

username=sam;location=China;

#我讲document.cookie称作"类似字符串"的属性,因为它并不是真正的字符串,只是在提取cookie信息时,这个属性表现得像个字符串而已

数据的编码和解码

    某些字符不能在cookie里使用,包括分号,逗号以及空白符号(比如空格和制表符)。在把数据存储到cookie之前,需要对数据进行编码,以便于实现正确的存储。

    在存储信息之前,使用JavaScript的escape()函数进行编码,而获得原始的cookie数据时就使用相应的unescape()函数进行解码。

    excape()函数把字符串里任何非ASCII字符都转换为相应的2位或4为十六进制格式,比如空格转换为%20,&转换为%26。

    举例来说,下面的代码会输出变量str里保存的原始字符串及escape()编码以后的结果:

<html>
<head>
<script>
function hello(){
	var str = 'Here is a (short) piece of text.';
	document.write(str = '<br />' + escape(str));
	}
</script>
</head>
<body>
<div id="div1">hello owrld</br>
<input type="button" name="111" οnclick="hello()" value = "来按我呀">
</div>
</body>
</html>

    可以看到空格被表示为%20,左括号是%28,右括号是%29。

3,cookie组成

    document.cookie里的信息看上去就像是由成对的名称和值组成的字符串,每一对数据的形式是:

name=value

    但实际上,每个cookie还包含其他一些相关信息,下面来分别介绍。

塔可商城
塔可商城

塔可商城, 一个基于springboot+uniapp+vue3技术栈开发的开源跨平台小程序、管理后台,后端服务的项目,它内置提供了会员分销, 区域代理, 商品零售等功能的新零售电商系统。强大弹性的架构设计,简洁的代码,最新的技术栈,全方面适合不同需求的前端,后端,架构的同学,同时更是企业开发需求的不二选择。 项目结构通过项目结构,你将清楚明白你即将入手的是一个怎么样的项目,你可能需要什么,如何

下载

cookieName 和 cookieValue

    cookieName和cookieValue就是在cookie字符串里看到的name=value里的名称和值。

domain

    domain属性向浏览器指明cookie属于哪个域。这个属性是可选的,在没有指定时,默认值是设置cookie的页面所在的域。

    这个属性的作用在于控制子域对cookie的操作。距离来说,如果设置其为www.example.com,那么子域code.example.com里的页面就不能读取这个cookie。但如果domain属性设置为example.com,那么code.example.com里的页面就能访问这个cookie了。

path

    path属性指定可以使用cookie的目录。如果只想让目录documents里的页面设置cookie的值,就把path设置为/documents。这个属性是可选的,常用的默认路径是/,表示cookie可以在整个域中使用。

secure

    secure属性是可选的,而且几乎很少使用。它表示浏览器在把整个cookie发送给服务器时,是否应该使用SLL安全标准。

expires

    每个cookie都有一个失效日期,过期就自动删除了。expires属性要以UTC时间表示。如果没有设置这个属性,cookie的生命期就和当前浏览器会话一样长,会在浏览器关闭时自动删除。

4,编写cookie

    要编写新的cookie,只要把包含所需属性的值赋予document.cookie就可以了:

document.cookie = "username=sam;expires=15/05/2018 00:00:00"

    使用javascript的Date对象可以避免手工输入日期和时间格式;

var cookieDate = new Date(2018,05,15);
document.cookie = "username=sam;expires="+cookieDate.toUTCString();

    这样就能达到和前面一样的结果。

#注意这里使用了cookieDate.toUTCString()函数,而不是cookieDate.toString();这是因为cookie的时间要以UTC格式设置。

    在实际编码时,应该用excape()函数来确保在给cookie赋值时不会有非法字符:

var cookieDate = new Date(2018,05,15);
var user = "Sam Jones";
document.cookie = "username="+excape(user)+";expires="+cookieDate.toUTCString();

5,编写cookie的函数

    很自然就会想到编写一个函数专门用于生成cookie,完成编码和可选属性的组合操作。下面的程序清单就列出了一个这样的程序代码:

function createCookie(name,value,days,path,domain,secure){
	if(days){
		var date = new Date();
		date.setTime(date.getTime()+(days*24*60*60*1000));
		var expires = date.toGMTString();
		}
		else var expires = "";
		cookieString = name + "=" +excape(value);
		if(expires) cookieString += ";expires=" +expires;
		if(path) cookieString += ";path=" + escape(path);
		if(domain) cookieString += ";domain=" + escape(domain);
		if(secure) cookieString += ";secure=" + escape(secure);
		document.cookie = sookieString;
		}

    这个函数的执行的操作是相当直观的,name和value参数组合得到"name = value",其中的value还经过编码以避免非法字符。

    在处理有效期时,使用的参数不是具体日期,而是cookie有效的天数。函数根据这个天数生成有效的日期字符串。

    其他属性都是可选的,如果设置了,就会附加到组成cookie的字符串里。

【推荐学习:javascript高级教程

相关文章

java速学教程(入门到精通)
java速学教程(入门到精通)

java怎么学习?java怎么入门?java在哪学?java怎么学才快?不用担心,这里为大家提供了java速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!

下载

相关标签:

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
Golang 测试体系与代码质量保障:工程级可靠性建设
Golang 测试体系与代码质量保障:工程级可靠性建设

Go语言测试体系与代码质量保障聚焦于构建工程级可靠性系统。本专题深入解析Go的测试工具链(如go test)、单元测试、集成测试及端到端测试实践,结合代码覆盖率分析、静态代码扫描(如go vet)和动态分析工具,建立全链路质量监控机制。通过自动化测试框架、持续集成(CI)流水线配置及代码审查规范,实现测试用例管理、缺陷追踪与质量门禁控制,确保代码健壮性与可维护性,为高可靠性工程系统提供质量保障。

6

2026.02.28

Golang 工程化架构设计:可维护与可演进系统构建
Golang 工程化架构设计:可维护与可演进系统构建

Go语言工程化架构设计专注于构建高可维护性、可演进的企业级系统。本专题深入探讨Go项目的目录结构设计、模块划分、依赖管理等核心架构原则,涵盖微服务架构、领域驱动设计(DDD)在Go中的实践应用。通过实战案例解析接口抽象、错误处理、配置管理、日志监控等关键工程化技术,帮助开发者掌握构建稳定、可扩展Go应用的最佳实践方法。

6

2026.02.28

Golang 性能分析与运行时机制:构建高性能程序
Golang 性能分析与运行时机制:构建高性能程序

Go语言以其高效的并发模型和优异的性能表现广泛应用于高并发、高性能场景。其运行时机制包括 Goroutine 调度、内存管理、垃圾回收等方面,深入理解这些机制有助于编写更高效稳定的程序。本专题将系统讲解 Golang 的性能分析工具使用、常见性能瓶颈定位及优化策略,并结合实际案例剖析 Go 程序的运行时行为,帮助开发者掌握构建高性能应用的关键技能。

8

2026.02.28

Golang 并发编程模型与工程实践:从语言特性到系统性能
Golang 并发编程模型与工程实践:从语言特性到系统性能

本专题系统讲解 Golang 并发编程模型,从语言级特性出发,深入理解 goroutine、channel 与调度机制。结合工程实践,分析并发设计模式、性能瓶颈与资源控制策略,帮助将并发能力有效转化为稳定、可扩展的系统性能优势。

14

2026.02.27

Golang 高级特性与最佳实践:提升代码艺术
Golang 高级特性与最佳实践:提升代码艺术

本专题深入剖析 Golang 的高级特性与工程级最佳实践,涵盖并发模型、内存管理、接口设计与错误处理策略。通过真实场景与代码对比,引导从“可运行”走向“高质量”,帮助构建高性能、可扩展、易维护的优雅 Go 代码体系。

17

2026.02.27

Golang 测试与调试专题:确保代码可靠性
Golang 测试与调试专题:确保代码可靠性

本专题聚焦 Golang 的测试与调试体系,系统讲解单元测试、表驱动测试、基准测试与覆盖率分析方法,并深入剖析调试工具与常见问题定位思路。通过实践示例,引导建立可验证、可回归的工程习惯,从而持续提升代码可靠性与可维护性。

2

2026.02.27

漫蛙app官网链接入口
漫蛙app官网链接入口

漫蛙App官网提供多条稳定入口,包括 https://manwa.me、https

130

2026.02.27

deepseek在线提问
deepseek在线提问

本合集汇总了DeepSeek在线提问技巧与免登录使用入口,助你快速上手AI对话、写作、分析等功能。阅读专题下面的文章了解更多详细内容。

8

2026.02.27

AO3官网直接进入
AO3官网直接进入

AO3官网最新入口合集,汇总2026年可用官方及镜像链接,助你快速稳定访问Archive of Our Own平台。阅读专题下面的文章了解更多详细内容。

208

2026.02.27

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

相关下载

更多

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
React 教程
React 教程

共58课时 | 5.6万人学习

TypeScript 教程
TypeScript 教程

共19课时 | 3.2万人学习

Bootstrap 5教程
Bootstrap 5教程

共46课时 | 3.5万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号