使用jQuery Cookies存储并返回数组中的值

看起来你遇到的核心问题是Cookie只能存储字符串类型的数据——直接把数组存进去的话，它会被自动转成逗号分隔的字符串，而不是保留数组的结构，所以你没法直接调用.length或者用数组的遍历方法。下面是具体的解决步骤和修正后的代码：

1. 正确将数组存入Cookie #

首先，在你点击保存按钮的逻辑里，需要把数组转换成JSON字符串再存入Cookie，这样才能保留数组的结构：

// 页面加载时先初始化数组（如果Cookie已有数据，优先读取）
const initialSavedDocs = document.cookie.split('; ').find(row => row.startsWith('savedDocs='))?.split('=')[1];
let docArray = initialSavedDocs ? JSON.parse(initialSavedDocs) : [];
let counter = docArray.length;
$('.doc-counter').text(counter);

$('.btn-save').click(function(e){
    e.preventDefault();
    counter++;
    $('.doc-counter').text(counter);
    var docVal = $(this).data('url');
    docArray.push(docVal);
    
    // 关键：将数组转为JSON字符串后存入Cookie
    document.cookie = `savedDocs=${JSON.stringify(docArray)}; path=/; max-age=86400`;
    // max-age=86400表示Cookie1天过期，可根据需求调整时长
});

2. 从Cookie中读取数组并获取长度/遍历 #

当你需要读取Cookie里的数组时，要先把JSON字符串解析回数组结构，之后就能正常使用数组的所有方法了：

// 读取Cookie的工具函数（方便复用）
function getCookie(name) {
    const cookieStr = `; ${document.cookie}`;
    const cookieParts = cookieStr.split(`; ${name}=`);
    if (cookieParts.length === 2) return cookieParts.pop().split(';').shift();
}

// 获取存储的文档数组
const savedDocsStr = getCookie('savedDocs');
const savedDocsArray = savedDocsStr ? JSON.parse(savedDocsStr) : [];

// 获取数组长度
console.log('已保存文档总数：', savedDocsArray.length);

// 遍历数组（比如用于批量下载）
savedDocsArray.forEach((docUrl, index) => {
    console.log(`第${index+1}个文档URL：`, docUrl);
    // 这里可以添加批量下载逻辑，比如创建a标签触发下载
    const downloadLink = document.createElement('a');
    downloadLink.href = docUrl;
    downloadLink.download = docUrl.split('/').pop();
    downloadLink.click();
});

额外注意事项 #

• 页面初始化时优先从Cookie读取数组，避免刷新后数据丢失；计数器直接用数组长度，保证和实际保存的文档数一致。
• 执行JSON.parse时一定要加判断，如果Cookie不存在或为空，就返回空数组，避免抛出解析错误。

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