如何将数组中的函数元素从字符串反序列化？——localStorage存储含嵌套元素与JSX的数组后反序列化函数遇阻求助

嘿，我完全懂你现在的困扰——localStorage只能存储字符串类型的数据，当你把带render函数（尤其是包含JSX的）的数组序列化后，取回来反序列化时，那个函数字符串根本没法变回可执行的函数对吧？这确实是前端存储里的常见坑，我给你几个实用的解决方案：

最推荐：分离数据与渲染逻辑（安全又稳定） #

localStorage的核心作用是存储纯数据，渲染逻辑属于代码层面的内容，完全没必要存在存储里。你可以这么做：

• 存储时：只保留数组里的纯数据字段，剥离掉render函数
• 取回时：给每个数据项重新添加上render函数

举个具体的代码示例：

// 假设originalArray是你要存储的原始数组
// 第一步：剥离函数，只存纯数据
const dataToStore = originalArray.map(item => {
  // 解构赋值去掉render属性，保留其他所有数据
  const { render, ...pureData } = item;
  return pureData;
});
localStorage.setItem('myDataArray', JSON.stringify(dataToStore));

// 第二步：从localStorage取回并恢复数组
const storedData = JSON.parse(localStorage.getItem('myDataArray'));
const restoredArray = storedData.map(item => ({
  ...item,
  // 重新添加上你的render函数
  render: row => (<div><Dialog text={row.Bemerkungen} /></div>)
}));

这个方法没有安全风险，而且逻辑清晰，后续如果要修改render的逻辑，直接改代码就行，不用动存储的数据。

备选：将函数字符串转回函数（不推荐，有安全风险） #

如果你真的非要把函数存在localStorage里，也可以把函数转成字符串存储，取回时再通过new Function或者eval转回函数。但要注意：这个方法有安全隐患，如果存储的字符串被恶意篡改，执行后可能会导致代码注入问题；另外如果你的render函数依赖闭包变量，转字符串后会丢失上下文，可能无法正常工作。

代码示例：

// 存储时：把render函数转成字符串
const dataToStore = originalArray.map(item => ({
  ...item,
  render: item.render.toString()
}));
localStorage.setItem('myDataArray', JSON.stringify(dataToStore));

// 取回时：将字符串转回函数（确保Dialog组件在当前作用域可用）
const storedData = JSON.parse(localStorage.getItem('myDataArray'));
const restoredArray = storedData.map(item => ({
  ...item,
  render: new Function('return ' + item.render)()
}));

进阶：使用专门的序列化库 #

有些第三方库（比如serializr）可以处理包含函数的对象序列化，你可以通过定义序列化规则来处理render函数。不过同样要注意安全问题，而且会增加项目依赖。

简单示例：

import { serialize, deserialize, createSchema } from 'serializr';

// 定义数据项的序列化规则
const itemSchema = createSchema({
  // 其他字段默认自动序列化
  render: {
    serialize: (value) => value.toString(),
    deserialize: (str) => new Function('return ' + str)()
  }
});

// 存储
const serializedData = serialize(itemSchema, originalArray);
localStorage.setItem('myDataArray', serializedData);

// 取回
const restoredArray = deserialize(itemSchema, localStorage.getItem('myDataArray'));

总的来说，我强烈建议你用第一个方案——分离数据和渲染逻辑，这是最符合前端最佳实践的做法，能避免很多不必要的麻烦。

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