【localstorage问题记录】复杂数据存储方式

问题记录

对于localstorage对new Map()的数据存储 数据持久化的核心原理 和 JavaScript 特定数据结构的处理。

const hasList = ref(new Map());
//存储数据
const saveToLocalStorage = () => {
   
   
  localStorage.setItem(
    'hasList',
    JSON.stringify(Array.from(hasList.value.entries()))
};
//获取数据
const loadFromLocalStorage = () => {
   
   
  //最初获取时，数据可能为空
  const saved = JSON.parse(localStorage.getItem('hasList')) || []; 
  //还原数据类型
  this.hasList= new Map(saved);
 }

---

一、为什么不能直接存储 Map 迭代器？

1. 迭代器的本质

const map = new Map([['a', 1], ['b', 2]]);
const iter = map.entries();

console.log(iter); // MapIterator { ['a', 1], ['b', 2] }

• 迭代器是临时对象：它是对原始数据的「动态视图」，不是数据本身
• 不可序列化：JSON.stringify(iter) 会得到 {}（丢失所有数据）
• 一次性消费：迭代器遍历后就会耗尽（如发电机发完电就空了）

2. localStorage 的限制

• 只能存储字符串（通过 JSON.stringify 转换）
• 无法存储函数、迭代器、Map/Set 等特殊对象

---

二、为什么需要 Array.from + new Map 转换？

数据流转过程