javascript - 如何存储/隐藏 JavaScript 事件并在以后重用？

Question

来自 https://developers.google.com/web/fundamentals/app-install-banners/#trigger-m68

let deferredPrompt;

window.addEventListener('beforeinstallprompt', (e) => {
  e.preventDefault();
  // Stash the event so it can be triggered later.
  deferredPrompt = e;
});

这段代码很好，但我想稍后在不同的地方触发隐藏事件。为此，我不仅需要将事件存储在变量中，还需要存储在其他地方。

问题:如何使用事件的方法存储事件？

我尝试了对对象进行序列化/反序列化的本地存储:

> localStorage.setItem('stashed-event', JSON.stringify(e))
>
> JSON.parse(localStorage.getItem('stashed-event'))

但这种方法并没有像预期的那样工作，因为它只存储键值并丢失所有事件方法。

Answer 1

您不能以这种方式存储事件。你想存储一个对象。对于这样的对象，只有可序列化的属性是可存储的。函数在 JavaScript 中不可序列化。函数在许多语言中都不可序列化。

从根本上说，这基本上是因为当您反序列化一个对象时，它的签名可能会改变。如果您曾经用 java 编程，这类似于在读取序列化对象并尝试重建对象时出现反序列化错误。因为对象的方法函数的主体可以在对象写入某个存储和稍后读取之间发生变化，所以方法不可序列化。这是因为当您序列化一个对象时，它不会在定义方法的地方序列化它的接口(interface)定义。它只是存储数据。

同样的原因，当您序列化为 json 字符串时，它会删除函数。

不是存储事件，而是将事件中的有用信息存储在对象中(或者让字符串化隐式删除并直接使用事件)。

您使用哪种存储方法取决于您的问题中未提及的内容。例如它应该存储多长时间，它是否应该在您的网站来源之外可用，通常会存储多少数据，是否要存储多个对象等。根据您问题中提供的有限信息，您可能只使用 localStorage 或内存数组就可以了。

如果您发现需要存储数百个对象，那么 indexedDB 将开始更加合适。但是仅仅选择不同的存储介质对是否可以存储函数没有任何影响。您不能存储函数。