问题：将div行内位置样式保存至Cookie时仅top属性被存储

我来帮你排查下这个Cookie只存top不存left的问题，大概率是这几个地方出了状况，咱们一步步来解决：

1. 检查setCookie的调用是否准确 #

首先要确认你调用setCookie存储left值时的参数有没有问题：

• 有没有写错Cookie名称？比如本该用"boxLeft"却写成了"boxTop"，这样会直接覆盖之前存的top值
• 有没有正确获取到盒子的left属性？比如是不是误拿了其他元素的left，或者盒子的left值本身是空字符串/undefined

可以在调用setCookie前加个日志确认值的有效性：

const boxLeft = document.getElementById('yourBox').style.left;
console.log('准备存储的left值:', boxLeft); // 确认这个值是有效的格式，比如"150px"
setCookie('boxLeft', boxLeft, 7);

2. 补全getCookie函数的完整逻辑 #

你提供的getCookie代码不完整，这很可能是读取left值失败的核心原因。完整的getCookie需要正确分割、解析Cookie字符串，这里给你补全：

function getCookie(cname) { 
  var name = cname + "="; 
  var decodedCookie = decodeURIComponent(document.cookie);
  // 分割所有Cookie项
  var cookieItems = decodedCookie.split(';');
  // 遍历查找目标Cookie
  for(let item of cookieItems) {
    // 去除首尾空格（Cookie项可能带空格）
    item = item.trim();
    if(item.startsWith(name)) {
      // 返回Cookie值部分
      return item.slice(name.length);
    }
  }
  // 没找到则返回空字符串
  return ""; 
}

3. 避免Cookie名称冲突 #

如果存储top和left时用了同一个Cookie名称（比如都叫"boxPosition"），第二次存储会直接覆盖第一次的内容，导致只有最后存的那个值生效。一定要用不同的名称分别存储，比如"boxTop"和"boxLeft"。

4. 完整可运行的示例代码 #

这里给你一套包含存储、读取盒子位置的完整逻辑，可以直接复用：

// 设置Cookie
function setCookie(cname, cvalue, exdays) { 
  var d = new Date(); 
  d.setTime(d.getTime() + (exdays*24*60*60*1000)); 
  var expires = "expires="+ d.toUTCString(); 
  document.cookie = `${cname}=${cvalue};${expires};path=/`; 
} 

// 获取Cookie
function getCookie(cname) { 
  var name = cname + "=";
  var decodedCookie = decodeURIComponent(document.cookie);
  var cookieItems = decodedCookie.split(';');
  
  for (let item of cookieItems) {
    item = item.trim();
    if (item.startsWith(name)) {
      return item.slice(name.length);
    }
  }
  return "";
}

// 保存盒子位置（比如在拖动结束后调用）
function saveBoxPos(box) {
  const top = box.style.top;
  const left = box.style.left;
  
  // 确认值有效再存储
  if(top) setCookie('boxTop', top, 7);
  if(left) setCookie('boxLeft', left, 7);
}

// 页面加载时恢复盒子位置
function loadBoxPos(box) {
  const savedTop = getCookie('boxTop');
  const savedLeft = getCookie('boxLeft');
  
  if(savedTop) box.style.top = savedTop;
  if(savedLeft) box.style.left = savedLeft;
}

// 使用示例
const myBox = document.getElementById('myBox');
// 绑定拖动结束事件（假设你的盒子支持拖动）
myBox.addEventListener('dragend', () => saveBoxPos(myBox));
// 页面加载时恢复位置
window.onload = () => loadBoxPos(myBox);

最后排查小技巧 #

• 测试前先清除浏览器中相关的旧Cookie，避免之前的错误数据干扰结果
• 可以在浏览器开发者工具的「Application」标签下查看Cookie存储情况，确认top和left是否都被正确写入

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