Local Storageの値をIEで取得できない

Question

ブラウザーのLocal Storage機能でお気に入り追加機能を実装しました。
IE以外のブラウザでは正常に動くのですが、 IEだと値が取得できません。

  $(function () {
   #Local Storageの値を挿入

    setInterval(function () {
      $(".button").on("click", function () {
        var mydata = new Set(
          JSON.parse(localStorage.getItem("mydata") || "[]")
        );
        mydata.add($(this).val());
        console.log(mydata);
        localStorage.setItem("mydata", JSON.stringify([...mydata]));　# おそらくここでエラーになっている

        #お気に入りボタン（id="favo_count"がある場所）にLocal Storageの値を挿入

        var jsonObj = localStorage.getItem("mydata");
        var jsObj = JSON.parse(jsonObj);

        var favo5 = document.getElementById("favorites");

        favo5.value = jsObj;

        var favo_8 = document.getElementById("favo_count");

        favo_8.textContent = jsObj.length + "件";
      });
    }, 6000);
    $(":reset").on("click", function () {
      localStorage.setItem("mydata", "[]");
    });
  });

試したこと
①下記のサイトを参考に、json2.js というのを入れてみましたが改善しませんでした。
https://www.softel.co.jp/blogs/tech/archives/3609

②babelのオンラインサイトでコードを変換したのですが改善しませんでした。
https://babeljs.io/repl/#?browsers=&build=&builtIns=false&spec=false&loose=false&code_lz=FBA&debug=false&forceAllTransforms=false&shippedProposals=false&circleciRepo=&evaluate=true&fileSize=false&timeTravel=false&sourceType=module&lineWrap=true&presets=es2016%2Creact%2Cstage-2%2Ces2015-loose&prettier=true&targets=&version=7.9.0&externalPlugins=

Comments

[m.ts10806]

コードはマークダウンの機能を利用してご提示ください。

[tomato01]

ご指摘ありがとうございます。コードを修正致しました。

Answer 1

IEでは、new Setに配列の引数を指定できません（MDN）。

空のnew Set()を行ってから、配列の中身を1つずつ追加する作業を行う必要があります。

Comments

[tomato01]

ご回答を頂き誠にありがとうございます。すみません私の勉強不足で「配列の中身を1つずつ追加する作業」の書き方がイメージがつかないのですが、どのような風に記載をすればいいのでしょうか。

[maisumakun]

JSON.parse(localStorage.getItem("mydata") || "[]")で取ってきた配列をforなりforEachなりで回して、1つずつaddしていくだけです。

[tomato01]

ご回答ありがとうございます。すみません、下記で正しいでしょうか。

var mydata = new Set();
var new_data = JSON.parse(localStorage.getItem("mydata") || "[]")
for ( var i = 0; i < new_data.length; i++ ) {
mydata.add($(this).val());
}

[maisumakun]

ループの中身はmydata.add(new_data[i]); ですね。

[tomato01]

ご指摘を頂きありがとうございます。教えて頂いたコードに変更をしたのですが、ボタンをクリックしても件数が増えていかないです。
## コンソールではボタンを押す毎に下記が表示されます。
Set(0) {}

[maisumakun]

IEでは、JSON.stringify([...mydata])もうまく行かないです。やはりmydata.forEachを回して配列に変換する必要があります。

…というより、Setを使わず配列での管理にしてしまった方がいいかもしれません（追加時には既存のデータをindexOfで調べて、なかったら追加する）。

[tomato01]

ご回答を頂き誠にありがとうございます。お伝えを頂いた方法で検討してみます。どうもありがとうございます（すいません、またコードを聞くかもしれません。）