如何在本地存储（或其他地方）中持久化ES6映射？

Question

var a = new Map([[ 'a', 1 ]]);
a.get('a') // 1

var forStorageSomewhere = JSON.stringify(a);
// Store, in my case, in localStorage.

// Later:
var a = JSON.parse(forStorageSomewhere);
a.get('a') // TypeError: undefined is not a function

不幸的是JSON。严格化（a）只返回“{}”，这意味着在还原时a将变成空对象。

我发现es6 mapify允许在映射和普通对象之间进行上/下转换，所以这可能是一种解决方案，但我希望我需要借助外部依赖来保持映射。

Answer 1

通常，只有当此属性保持不变时，序列化才有用

deserialize(serialize(data)).get(key) ≈ data.get(key)

其中a≈ b可以定义为序列化（a）==序列化（b）。

将对象序列化为JSON时可以满足这一要求：

var obj1 = {foo: [1,2]},
    obj2 = JSON.parse(JSON.stringify(obj1));
obj1.foo; // [1,2]
obj2.foo; // [1,2] :)
JSON.stringify(obj1.foo) === JSON.stringify(obj2.foo); // true :)

这是因为属性只能是字符串，可以无损地序列化为字符串。

但是，ES6映射允许将任意值作为键。这是有问题的，因为对象是通过其引用而不是数据唯一标识的。序列化对象时，会丢失引用。

var key = {},
    map1 = new Map([ [1,2], [key,3] ]),
    map2 = new Map(JSON.parse(JSON.stringify([...map1.entries()])));
map1.get(1); // 2
map2.get(1); // 2 :)
map1.get(key); // 3
map2.get(key); // undefined :(

所以我想说，总的来说，用一种有用的方式做这件事是不可能的。

对于那些可以工作的情况，最有可能的是你可以使用一个普通的对象而不是地图。这还具有以下优点：

• 它将能够在不丢失关键信息的情况下被串化到JSON。
• 它将在旧的浏览器上工作。
• 它可能更快。

Answer 2

干净利落：

JSON.stringify([...myMap])

Answer 3

假设键和值都是可序列化的，

localStorage.myMap = JSON.stringify(Array.from(map.entries()));

应该管用。相反，使用

map = new Map(JSON.parse(localStorage.myMap));