Neat and tidy:

Transforming a Map to an array using the spread operator - JSON.stringify([...myMap])

Typically, serialization is only beneficial if the following condition holds true:

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

where a ≈ b can be defined as serialize(a) === serialize(b).

This criterion is met when converting an object to 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 :)

This works because properties are restricted to strings, which allows for lossless serialization into strings.

However, ES6 maps permit arbitrary values as keys. This presents a challenge since objects are identified by their reference rather than their data. When serializing objects, these references are lost.

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 :(

Therefore, I would argue that in most cases it's not feasible to achieve this in a practical manner.

In situations where it could work, it is likely that you can opt for a plain object instead of a map. This approach also offers several benefits:

• It can be stringified to JSON without losing key information.
• It is compatible with older browsers.
• It may result in improved performance.

Expanding on the solution provided by Oriol in their response, there is room for improvement. By leveraging object references for keys only if there is a primary root or entry point into the map, and ensuring that each object key can be traced back to that initial root key, we can enhance the functionality.

If we tweak Oriol's example to utilize Douglas Crockford's JSON.decycle and JSON.retrocycle, we can establish a map that addresses this scenario:

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

Through decycling and retrocycling, it becomes feasible to represent cyclic structures and dags within JSON format. This feature comes in handy when establishing relationships between objects without appending extra properties to said objects or when interconnecting primitives with objects bidirectionally using an ES6 Map.

One drawback to note is that utilizing the original key object for the new map is not permissible (map3.get(key); would yield undefined). Nonetheless, maintaining the original key reference while employing a freshly parsed JSON map seems highly improbable in practice.

If you create a custom implementation of the toJSON() function for any class objects, the standard JSON.stringify() will work smoothly!

Maps with Arrays as keys? Maps with other nested Map structures as values? A Map nested inside a regular Object? You can handle it all effortlessly by implementing your own toJSON().

Map.prototype.toJSON = function() {
    return Array.from(this.entries());
};

That's all there is to it! _{You need to manipulate prototypes in this case. While you could manually add toJSON() to every non-standard object or structure, leveraging JavaScript's capabilities is much more powerful.}

DEMO

test = {
    regular: 'object',
    map: new Map([
        [['array', 'key'], 7],
        ['stringKey', new Map([
            ['innerMap', 'supported'],
            ['anotherValue', 8]
        ])]
    ])
};
console.log(JSON.stringify(test));

This code snippet outputs:

{"regular":"object","map":[[["array","key"],7],["stringKey",[["innerMap","supported"],["anotherValue",8]]]]}

However, deserializing back to true Map structures isn't as straightforward. To demonstrate, I'll reconstruct the maps from the resulting string to retrieve a value:

test2 = JSON.parse(JSON.stringify(test));
console.log((new Map((new Map(test2.map)).get('stringKey'))).get('innerMap'));

_{The output is}

"supported"

While this process may seem cumbersome, with some added special handling, you can automate deserialization as well.

Map.prototype.toJSON = function() {
    return ['window.Map', Array.from(this.entries())];
};
Map.fromJSON = function(key, value) {
    return (value instanceof Array && value[0] == 'window.Map') ?
        new Map(value[1]) :
        value
    ;
};

Now the serialized JSON looks like this:

{"regular":"object","test":["window.Map",[[["array","key"],7],["stringKey",["window.Map",[["innerMap","supported"],["anotherValue",8]]]]]]}

And deserializing and using it becomes simple with Map.fromJSON:

test2 = JSON.parse(JSON.stringify(test), Map.fromJSON);
console.log(test2.map.get('stringKey').get('innerMap'));

_{The output remains the same without creating new instances of Map()}

DEMO

If you are working with multi-dimensional Maps, the accepted answer may not be sufficient. It is important to remember that a Map object can contain another Map object as either a key or value.

A more reliable and secure approach to handling this situation would be the following:

function convertMapToArray(m){
  return m.constructor === Map ? [...m].map(([v,k]) => [convertMapToArray(v),convertMapToArray(k)])
                               : m;
}

With this function in place, you can easily make use of it like so:

localStorage.myMap = JSON.stringify(convertMapToArray(myMap))

// save
const mapData = new Map([['a', 1]]);
localStorage.a = JSON.stringify(mapData, replacer);

// load
const newMapData = JSON.parse(localStorage.a, reviver);

// custom replacer and reviver functions
function replacer(key, value) {
  const originalObj = this[key];
  if(originalObj instanceof Map) {
    return {
      type: 'Map',
      data: Array.from(originalObj.entries()), 
    };
  } else {
    return value;
  }
}
function reviver(key, value) {
  if(typeof value === 'object' && value !== null) {
    if (value.type === 'Map') {
      return new Map(value.data);
    }
  }
  return value;
}

I've provided an explanation of the replacer and reviver functions in this Stack Overflow post.

This code is versatile and can handle not only Maps but also nested Maps within arrays or objects during serialization.

Utilizing the localStorage API in JavaScript to store an ES6 Map

issue

"[object Map]" ❌

(() => {
  const map = new Map();
  map.set(1, {id: 1, name: 'eric'});
  
  localStorage.setItem('app', map);
  localStorage.getItem('app');
  
})();

resolution

Using JSON.stringify to serialize the Map object before storing it is the solution. Then, using JSON.parse to deserialize it before accessing the Map object will solve the issue ✅

(() => {
  const map = new Map();
  map.set(1, {id: 1, name: 'eric'});
  
  localStorage.setItem('app', JSON.stringify([...map]));
  const newMap = new Map(JSON.parse(localStorage.getItem('app')));
  
})();

screenshots

https://i.sstatic.net/IrIv7.png

refs

It is important to note that a Map is an ORDERED structure, meaning the first item entered will be the first listed when iterating through it.

Unlike a JavaScript Object, which does not guarantee order, I needed this specific structure (hence using Map). However, it was disappointing to discover that JSON.stringify doesn't work with Maps (though understandable).

To overcome this limitation, I created a 'value_to_json' function which involves parsing everything manually - resorting to JSON.stringify only for basic types.

Subclassing Map with a .toJSON() method didn't prove effective as it expects a value instead of a JSON string and is considered outdated.

Although my use case might be unique in this scenario.

Related:

• https://github.com/DavidBruant/Map-Set.prototype.toJSON/issues/16
• JSON left out Infinity and NaN; JSON status in ECMAScript?
• How to stringify objects containing ES5 Sets and Maps?
• JSON stringify a Set

function value_to_json(value) {
  // Implementation of value_to_json function
}

// Example usage
let m = new Map();
// Add entries to the map
const test = {
  "hello": "ok",
  "map": m
};
console.log(value_to_json(test));

One thing to keep in mind is that attempting to setItem on a large map collection may result in triggering a Quota Exceeded Error. I recently encountered this issue when trying to store a map with 168590 entries in local storage. Unfortunately, the error message popped up. :(

Experience seamless complexity handling with the revolutionary JSBT framework developed by yours truly: https://www.npmjs.com/package/@cheprasov/jsbt

This cutting-edge library excels in encoding and decoding intricate data structures, effortlessly navigating circular dependencies.

const map = new Map([ ['apple', 50], ['banana', 20] ]);

const encodedData = JSBT.encode(map);

const decodedMapStructure = JSBT.decode(encodedData);