JavaScript Cookie 读写与删除封装及跨域处理
本文介绍 JavaScript 中 Cookie 的读写删除封装方法,涵盖设置、获取及过期删除逻辑。针对页面间数据传递场景,提供基于 Cookie 的解决方案,并深入探讨跨域环境下 Cookie 同步的实现机制与注意事项。
JavaScript Cookie 读写与删除封装及跨域处理
JavaScript 中 Cookie 的读取、写入与删除操作
前言:
在前端开发日益普及的今天,页面间的数据交互至关重要。部分数据可以通过 URL 传参轻松解决,但对于某些需要动态变更的参数,例如从页面 A 跳转至页面 B 选择数据,再返回页面 A 时(典型的场景如收货地址的选择),通过存储 Cookie 可以有效解决这一数据传递问题。
针对 Cookie 的操作,本文提供了一些简单的封装代码,这些代码借鉴了前人的经验并进行了整合。Cookie 的核心操作主要包括写入、读取和删除,我们首先从写入操作开始,因为只有先写入数据,才能进行后续的读取和删除等操作。
/**
* 设置COOKIE
* @param name 设置cookie的属性名
* @param value 设置cookie的属性值
* @param time 设置cookie的时间
*/
function setCookie(name, value , time) {
time = time ? parseFloat(time) : 0 ;
var exp = new Date();
exp.setTime(exp.getTime() + time);
// escape 这种编码方式过时了 改用 encodeURIComponent
// document.cookie = name + "=" + escape(value) + ";expires=" + (time ? exp.toGMTString() : 'session');
document.cookie = name + "=" + encodeURIComponent(value) + ";expires=" + (time ? exp.toGMTString() : 'session');
}
在了解了写入操作后,接下来我们看看如何读取 Cookie 中的数据。
/**
* 获取cookie
* @param name
* @returns {null}
*/
function getCookie(name) {
var arr, reg = new RegExp("(^| )" + name + "=([^;]*)(;|$)");
if (arr = document.cookie.match(reg))
//unescape这种解码方式好像过时了,可以采用decodeURIComponent解码方式
//return unescape(arr[2]);
return decodeURIComponent(arr[2]);
else
return null;
}
接下来介绍 Cookie 的删除操作。该操作相对简单,核心思路是将 Cookie 的过期时间设置为过去的时间,从而使 Cookie 自动失效。
/**
* 删除cookie
* @param name
*/
function delCookie(name) {
var exp = new Date();
exp.setTime(exp.getTime() - 1);
var cval = getCookie(name);
if (cval != null)
document.cookie = name + "=" + cval + ";expires=" + exp.toGMTString();
}
以上即为对 Cookie 基本操作的简要说明。
接下来,我们将探讨 Cookie 更深层次的问题:跨域处理。
Js跨域同步cookie怎么实现
document.cookie = "name=" + "value;" + "expires=" + "datatime;" + "domain=" + "" + "path=" + "/path" + "; secure";
/**
* 删除cookie
* value Cookie值
* expires 有效期截至(单位毫秒)
* path 子目录
* domain 有效域
* secure 是否安全
*/
<iframe src='http://网站:1234/test/Index' width='100' height='100' style="display:none"></iframe>
/*
*原页面js里 window.location = "http://另外一个网站:1234/GetCookie/Index?" + document.cookie;跳到另外一个站,另外一个站获取cookie,设置cookie
*/
var url = window.location.toString();//获取地址
var get = url.substring(url.indexOf("liuph"));//获取变量和变量值
var idx = get.indexOf("=");//获取变量名长度
if (idx != -1) {
var name = get.substring(0, idx);//获取变量名
var val = get.substring(idx + 1);//获取变量值
setCookie(name, val, 1);//创建Cookie
}
以上就是今天关于 Cookie 的完整解读。
感谢阅读,希望本文能对大家有所帮助,感谢各位对本站的支持!
JavaScript怎么准确判断数据类型:typeof、instanceof与Object.prototype.toString
2026-11-05 17:09:21
JS中将数组和对象混合组装为JSON字符串
2026-11-05 16:41:42
JS运算符优先级与结合性的区别是什么?
2026-11-05 13:22:02
JS Map怎么只遍历Key或Value
2026-11-05 13:00:36
D3.js 与 ECharts 选型对比:灵活性 vs 开发效率
2026-11-05 09:45:01
