Navigator.share API发送陈旧数据问题的排查与解决

问题场景 #

开发在线文字游戏网站时，实现了解谜完成后的分享功能：首次分享结果符合预期，但重置谜题并再次完成后，通过Web Share API发送的仍是第一次的分数等陈旧信息。

相关代码 #

生成分享内容的代码：

s = "I just finished the Addergram puzzle for " + this.fileName().substring(0,11) + "\n\n"
  + "I scored " + this.totalScore + " %"
  + "\n\n"
  + s;
// console.log(s);
const shareData = {
  title: "Addergrams",
  text: s,
  url: "https://addergrams.com",
};

取消注释console.log(s)后，能看到s已正确更新为当前解谜的新内容，但分享出去的依旧是旧数据。

分享按钮的事件监听器：

btn.addEventListener("click", async () => {
  try {
    await navigator.share(shareData);
  } catch (err) {
    console.log(err);
  }
});

测试确认：第二次解谜后控制台输出的s正确，但分享到Gmail的仍是第一次的数据。

问题原因 #

核心问题是变量作用域与引用绑定：
最初的shareData是局部作用域内的常量，事件监听器创建时就绑定了这个初始对象的引用。后续重新生成的shareData如果处于不同作用域，或者监听器没有更新引用，点击按钮时依然会调用第一次创建的旧shareData，导致分享旧内容。

解决方案 #

将shareData设为主游戏板类的实例属性，每次完成解谜时更新这个属性的内容；同时修改事件监听器，让它引用实例的最新shareData：

修改后的事件监听器代码：

btn.addEventListener("click", async () => {
  try {
    await navigator.share(this.shareData);
  } catch (err) {
    console.log(err);
  }
});

这样每次点击分享按钮时，都会获取到类实例中最新的shareData对象，确保发送的是当前解谜的正确数据。

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