时间戳

首页 > 解决方案 > 如何存储/隐藏 JavaScript 事件并在以后重用它？

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

问题描述

来自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'))

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

标签： javascripteventslocal-storageweb-storage

解决方案

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

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

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

与其存储事件，不如将来自事件的有用信息存储在一个对象中（或者让事物通过 stringify 隐式删除并直接使用该事件）。

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

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

推荐阅读