如何在chrome.storage.sync已有键中添加新键值对避免覆盖？

嗨，你的问题核心在于每次调用setData时，都会直接用新对象覆盖掉对应日期键的原有数据，而不是在原有数据基础上添加新属性。要实现同一个日期下同时保存start和end，我们需要先获取该日期已存储的数据，再将新属性合并进去，最后重新保存。

因为Chrome的storage API是异步的，所以我们要通过回调来处理数据的读取和写入。下面是修改后的完整代码：

var storage = chrome.storage.sync;

// 封装合并数据的函数：先读取已有数据，再合并新数据后保存
function mergeData(key, newData) {
  // 先获取当前日期对应的已有存储数据
  storage.get(key, function(result) {
    // 如果该日期还没有数据，就初始化一个空对象
    var existingData = result[key] || {};
    // 合并原有数据和新数据，保留原有属性的同时添加新属性
    var updatedData = { ...existingData, ...newData };
    // 将合并后的完整数据重新存入存储
    storage.set({ [key]: updatedData });
  });
}

function onClickMarkStartButton() {
  var date = getCurrentDate();
  var startData = { 'start': getCurrentTime() };
  // 用mergeData替代原来的setData，避免覆盖
  mergeData(date, startData);
}

function onClickMarkEndButton() {
  var date = getCurrentDate();
  var endData = { 'end': getCurrentTime() };
  mergeData(date, endData);
}

// 假设你的日期、时间获取函数已实现，这里给个示例参考
function getCurrentDate() {
  const date = new Date();
  return `${date.getMonth()+1}/${date.getDate()}/${date.getFullYear()}`;
}

function getCurrentTime() {
  const date = new Date();
  return `${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}`;
}

关键要点说明： #

• 新增的mergeData函数是核心：它先读取目标日期的已有数据，确保不会丢失之前保存的start或end值；
• 使用对象展开运算符...完成数据合并，既保留原有属性，又添加新的属性（如果有重复键才会覆盖，这里start和end是不同键，完全兼容）；
• 因为storage.get是异步操作，必须在它的回调函数里完成合并和保存，保证读取到数据后再处理。

这样修改后，当你先点击Start再点击Stop时，chrome.storage.sync里的日期键就会变成6/1/2018: { "start": "16:34", "end": "16:40" }，再也不会出现覆盖原有数据的问题啦～

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