JavaScript中如何通过addEventListener区分postMessage传递的多个变量

方案1：发送端传递带标识的结构化数据（推荐） #

核心思路：发送消息时不要只传递纯数值，额外附带变量标识，接收端通过标识区分不同变量，是稳定性最高的实现方式。

发送端修改后代码：

var a = 3;
var b = 4;
// 传递带变量标识的结构化对象
postMessage({
  storageKey: 'variable a',
  value: a
}, '*');
postMessage({
  storageKey: 'variable b',
  value: b
}, '*');

接收端代码：

addEventListener('message', event => {
  // 直接用消息自带的存储key写入sessionStorage
  sessionStorage.setItem(event.data.storageKey, event.data.value);
});

方案2：无法修改发送端代码时的兜底方案（不推荐） #

仅适用于发送顺序固定（先发a、后发b）的场景，存在顺序错乱就存错数据的风险，仅做临时兼容参考。

// 计数器记录消息接收顺序
let receiveCount = 0;
addEventListener('message', event => {
  receiveCount += 1;
  if (receiveCount === 1) {
    sessionStorage.setItem("variable a", event.data);
  } else if (receiveCount === 2) {
    sessionStorage.setItem("variable b", event.data);
  }
});

内容的提问来源于stack exchange，提问作者Pat D.