JavaScript实现数组存入Cookie及跨页面恢复的问题求助

嘿，我看你在尝试用Cookie在页面间传递电影数组，这里踩了个很常见的坑——Cookie只能存储字符串类型的数据，直接把数组塞进去会被自动转成逗号分隔的字符串（比如"Star Wars,Resident Evil"），而不是保留数组结构，所以页面2获取到的其实是字符串，不是数组，自然length就不对啦。

给你调整一下代码，完美解决这个问题：

页面1：正确存储数组到Cookie #

首先，存Cookie的时候要把数组序列化为JSON字符串，这样才能保留数组的结构：

var films = [];

// 购物车按钮点击逻辑示例
$('.cart-button').click(function() {
  // 添加电影到数组
  films.push("Star Wars");
  films.push("Resident Evil");
  
  alert(films); // 这里显示正常：Star Wars, Resident Evil
  
  // 把数组转成JSON字符串再存入Cookie，path=/确保全站可访问
  SetCookie("cart", JSON.stringify(films), 7); // 7表示Cookie有效期7天，可按需调整
});

// 完善SetCookie函数（带过期时间和路径）
function SetCookie(name, value, days) {
  var expires = "";
  if (days) {
    var date = new Date();
    date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
    expires = "; expires=" + date.toUTCString();
  }
  document.cookie = `${name}=${value || ""}${expires}; path=/`;
}

页面2：正确从Cookie恢复数组 #

取Cookie的时候，要把JSON字符串解析回数组，还要处理Cookie不存在的情况（避免报错）：

function getMovie2() {
  // 获取Cookie值
  var cartCookie = GetCookie("cart");
  
  // 解析为数组，若Cookie不存在则默认空数组
  var movie = cartCookie ? JSON.parse(cartCookie) : [];
  
  var r = movie.length;
  alert(r); // 现在会正确显示数组长度：2
  
  $("#table1").empty();
  // 循环渲染表格内容
  for (var i = 0; i < r; i += 1) {
    $("#table1").append(`<tr><td>${movie[i]}</td></tr>`);
  }
}

// 完善GetCookie函数
function GetCookie(name) {
  var nameEQ = `${name}=`;
  var cookieParts = document.cookie.split(';');
  
  for (var i = 0; i < cookieParts.length; i++) {
    var c = cookieParts[i].trim();
    if (c.indexOf(nameEQ) === 0) {
      return c.substring(nameEQ.length);
    }
  }
  return null;
}

关键注意点 #

• 序列化/反序列化：必须用JSON.stringify()和JSON.parse()处理数组，这是Cookie存复杂数据的标准操作
• Cookie路径：设置path=/确保页面1和页面2在同一个域名下都能访问到这个Cookie，不然可能出现“存了但取不到”的情况
• 异常处理：解析JSON的时候要考虑Cookie不存在的情况，设置默认空数组避免JSON.parse(null)报错

内容的提问来源于stack exchange，提问作者MrDarkness96