[フロントエンド] ES6のMapをLocalStorageに保存して取り出す

こんにちは@yoheiMuneです。
今日はECMAScript6のMapをLocalStorageに保存する方法について、ブログを書きたいと思います。

目次

何がしたいのか

フロントエンドの実装をしているとLocalStorageに保存する機会は多いです。ES6のMapの場合には、どのように保存/取り出しをすれば良いのかを調べる機会がありました。

MapをそのままLocalStorageに保存することはできません。

// Mapをそのまま、LocalStorageに保存.
let map = new Map([["aaa", "bbb"]])
localStorage.setItem('my-map', map)
undefined
localStorage.getItem('my-map')
"[object Map]"

調べてみると少しだけ工夫が必要だったので、ブログにも残しておきたいなと思った次第です。

MapをLocalStorageに保存する

MapをLocalStorageに保存するには、MapをJavaScriptのオブジェクト形式に変換してから、それをJSON文字列に変換する手順が必要です。具体的には以下のように実装します。

// Mapを作成.
var map = new Map()
map.set("key1", "value1")
map.set("key2", "value2")

// MapをJSのオブジェクト形式に変換する.
var items = Array.from(map.entries())

// JSON文字列に変換する.
var jsonString = JSON.stringify(items)

// LocalStorageに保存.
localStorage.setItem('item', jsonString)

これでJSON文字列としてMapの内容を保存することができました。LocalStorageには以下の内容で保存されています。

'[["key1","value1"],["key2","value2"]]'

なお、ES6のスプレッド構文を用いてjsonStringを作成することもできます。

var jsonString = JSON.stringify([...map])

シンプルでいいですね。

LocalStorageからMapを復元する

LocalStorageからMapとして取り出す場合は、以下のように実装します。

// LocalStorageから取り出す.
var jsonString = localStorage.getItem('item')

// JSのオブジェクト形式に戻す.
var items = JSON.parse(jsonString)

// Mapを作成する.
var map = new Map(items)

// 値が正しく取得できる.
console.log(map.get('key1'))  // value1

これでMapを復元することができました。

関連記事

ES6のMapとSetの基本機能について、ブログを書きました。具体的な使い方を学べるので、合わせて参考になれば幸いです。

[JavaScript] ECMAScript6のMapとSetを使ってみよう

参考情報

今回の実装は、以下のスレを参照しました。ありがとうございます。

javascript - How do I persist a ES6 Map in localstorage (or elsewhere)? - Stack Overflow

最後に

MapとLocalStorageなどJavascript界隈のエコシステムがどんどんと繋がってくると、開発がもっともっと面白くなりそうです。こういうTips系のネタも、今後もドシドシと書きたいと思います。

最後になりますが本ブログでは、フロントエンド、Swift、PHP、Node.js、Linux、Python、Java、インフラ、Go言語、機械学習、などの技術トピックを発信をしていきます。「プログラミングで困ったその時の、解決の糸口に！」そんな目標でブログを書き続けています。ぜひ、本ブログのRSSやTwitterをフォローして貰えたら嬉しいです ^ ^

最後までご覧頂きましてありがとうございました！