javascript - 为什么加载新页面时 Chrome.storage.sync 存储会重置？

Question

var userCharacters = [];

window.onkeyup = function(e){

userCharacters.push(e.key);

chrome.storage.sync.set({'userInput':userCharacters})

if(e.key == "Shift")
  chrome.storage.sync.get('userInput',function(userText){
    alert(userText.userInput);
  });

}

我正在尝试存储和检索标记为“userInput”的数据，但每次打开新页面或选项卡时，它都会重置 userText.userInput 值。有人可以解释为什么会发生这种情况以及我们如何解决这个问题吗？

Answer 1

每次加载新页面时，userCharacters[] 数组都会定义为 []，然后向其中添加字符。当您运行 chrome.storage.sync.set({'userInput':userCharacters}) 时，现有数据将被覆盖。
要解决此问题，请在用户添加更多数据之前将存储中的数据加载到 userCharacters 中。

var userCharacters;
chrome.storage.sync.get('userInput',function(userText){
  userCharacters = userText.userInput;
});
window.onkeyup = function(e){
  userCharacters.push(e.key);
  chrome.storage.sync.set({'userInput':userCharacters})
  if(e.key == "Shift")
    chrome.storage.sync.get('userInput',function(userText){
      alert(userText.userInput);
    });
}