为什么event事件无法被序列化到本地存储

董厂长2023-07-21 17:39

此问题出现的场景：

今天为要做一个记住用户上一次选择的task，按正常思路就是localStorage 存储这一次的所有入参，然后下一次init时候调用一下。但是发现有一个入参是$event 序列化之后拿出来少了很多属性。

原因：

事件（Event）对象通常包含特定于浏览器的属性，例如目标元素和鼠标位置。这些属性不能被序列化为 JSON 格式或其他格式，因此事件对象本身也无法被序列化。如果您需要在客户端和服务器之间传递事件数据，您可以将事件属性提取到一个普通的 JavaScript 对象中，然后将该对象序列化。

简单理解就是：event包含了对当前dom的引用，dom无法被序列化

解决方案：

好的，举个例子来说，假设您有一个鼠标单击事件的处理程序，您需要将事件数据发送到服务器以进行处理。您可以创建一个普通的 JavaScript 对象，将事件属性作为对象属性添加进去，然后将该对象序列化为 JSON 格式或其他格式。例如：

TypeScript 复制代码

element.addEventListener('click', function(event) {
  var eventData = {
    type: event.type,
    target: event.target.tagName,
    x: event.clientX,
    y: event.clientY
  };
  
  // 将 eventData 发送到服务器
  // ...
});

在这个例子中，我们将事件类型、目标元素的标签名以及鼠标位置提取到一个普通的 JavaScript 对象 `eventData` 中，并将其发送到服务器。这样就避免了直接将整个事件对象序列化的问题。

我自己的解决方案：

给调用方法的dom元素加上id，localStorage只存id，等下一次组件初始化时候，querySelecter此dom，设置点击事件。