JavaScript Cookie 读写与删除封装及跨域处理

作者:木棉时间:2026-10-22 01:54:08浏览:652

本文介绍 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 的完整解读。

感谢阅读,希望本文能对大家有所帮助,感谢各位对本站的支持!

作者最新文章