2018/04/06更新

[フロントエンド] 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言語、機械学習、などの技術トピックを発信をしていきます。「プログラミングで困ったその時の、解決の糸口に!」そんな目標でブログを書き続けています。ぜひ、本ブログのRSSTwitterをフォローして貰えたら嬉しいです ^ ^

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





こんな記事もいかがですか?

[取り組み] フロントエンドでコーディングスピードをアップさせる6つの方法!と思って書いてたら30個も書いちゃった。
[フロントエンド] フロントエンドの入社試験99問!難しいですよ〜w。
[フロントエンド] Webページを表示するテストの際に、通信速度を3Gに制限して表示してみよう
[フロントエンド] スマホ実機でのデバッグ手段を増やす!Macのプロキシを利用して、通信内容を確認する。
[フロントエンド] Chrome 35 Beta の変更点。Touch制御、新しいJavaScript機能、プレフィックスなしのShadowDOM
[フロントエンド]複数アカウントでのテストには、Chromeのユーザー管理を使って、Cookieを切り替えると便利
[フロントエンド] Chrome36βが出た。変更点など。element.animate、HTML Imports、Object.observe、他。
RSS画像

もしご興味をお持ち頂けましたら、ぜひRSSへの登録をお願い致します。