React JS中Cookie存储数组后加载为空，求问题原因排查

刚接触React就碰到Cookie的问题，太正常了——我当初也踩过类似的坑！结合你的代码和描述，我整理了几个最可能的原因，你可以逐一排查：

• Cookie只能存储字符串，你没做序列化处理
  浏览器Cookie的本质是字符串键值对，如果你直接把数组存进去，很多Cookie库（比如react-cookie）不会自动帮你做JSON序列化。这时候存进去的可能是[object Object]这类无效字符串，加载后解析自然就成了空数组。
  解决办法很简单：存的时候把数组转成JSON字符串，加载的时候再解析回来。修正后的代码应该是这样：

  console.log(this.state.datasets);
  // 序列化后存储
  cookie.save('datasets', JSON.stringify(this.state.datasets), { path: '/' , maxAge: 100000});
  // 加载时解析
  var myArray = JSON.parse(cookie.load('datasets'));
  console.log(myArray);
  

• 数组里包含无法序列化的内容
  如果你的this.state.datasets数组里有函数、Symbol、循环引用的对象这类JSON无法序列化的元素，JSON.stringify会直接忽略这些内容，甚至导致整个序列化失败，最终存到Cookie里的是空字符串或者不完整的内容，加载后就是空数组。
  你可以先在控制台打印JSON.stringify(this.state.datasets)，看看输出的是不是完整的JSON字符串——如果输出undefined或者缺失部分内容，那就是这个问题，需要清理数组里不能序列化的元素。

• Cookie大小超出限制
  单个Cookie的键值对大小不能超过4KB，如果你的数组转成JSON字符串后长度超过了4096字节，浏览器会拒绝存储这个Cookie，自然加载不到内容。你可以用JSON.stringify(this.state.datasets).length查看字符串长度，要是超了，就得考虑用其他存储方式（比如localStorage），或者压缩数组里的数据。

• Cookie库的写入时机问题
  虽然大部分Cookie库的save方法是同步的，但也不排除某些特殊场景下写入操作还没完成就执行了load。你可以试着把load的代码延迟一下测试看看：

  cookie.save('datasets', JSON.stringify(this.state.datasets), { path: '/' , maxAge: 100000});
  setTimeout(() => {
    var myArray = JSON.parse(cookie.load('datasets'));
    console.log(myArray);
  }, 100);
  

  如果这样能拿到数据，那说明是时机问题，不过这种情况非常少见。

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