localStorageに不要なデータが入ってしまう

selectボックスのプルダウンに選択肢を追加できるようにするため、localStorageを使おうと思っています。
（コードは以下参照）

その際、localStorageに意図しないデータ（rack-mini-profiler など）が入ってしまい、selectボックスのプルダウンに表示されてしまいます。

key	value
templates-・・・	<script id="profilerTemplate" type="text/x-jquery-tmpl">・・・

これを分離して、入力したデータだけプルダウンに表示させる方法があればご教示いただきたいです。
また、JSを書き慣れていないため、以下のコードでもっとスマートに書ける部分があればご指摘いただけるとありがたいです。

ーーーーーー以下サンプルコードーーーーー

JavaScript
1<body>
2  <select name="test"id="test"></select>
3  <input type="text" id="input">
4  <input type="button" id="add" value="追加">
5
6  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
7  <script>
8    $(function() {
9      // 「追加」ボタンでlocalStorage/selectに追加
10      $("#add").click(function() {
11        var input = $("#input").val();
12        localStorage.setItem(`"${input}"`, input);
13
14        var item = localStorage.getItem(`"${input}"`);
15        $("#test").append(
16          `<option value="${item}" selected>${item}</option>`
17        );
18      });
19
20      // localStorageに保存したデータをoptionに表示
21      keys = Object.keys(localStorage);
22      for(i = 0; i < keys.length; i++) {
23        var getItem = localStorage.getItem(keys[i]);
24        var selectTag = document.getElementById("test");
25        selectTag.insertAdjacentHTML(
26          "beforeend",
27          `<option value="${getItem}">${getItem}</option>`
28        );
29      }
30    });
31  </script>
32</body>

行動規範の内容に同意します

回答1件

ベストアンサー

localStorageは、ウェブサイト全体で共有されるものです。このプルダウンであらゆるキーを使うようにしてしまうと、（すでになにか出ているように）ほかの機能性と干渉します。

ということで、localStorage全体を使うのではなく、あるキーだけ使う形にしたほうがいいでしょう。

javascript
1   var key = 'some-select';
2
3    $(function() {
4      // 「追加」ボタンでlocalStorage/selectに追加
5      $("#add").click(function() {
6        var input = $("#input").val();
7        var storedArr = JSON.parse(localStorage.getItem(key) || '[]');
8        storedArr.push(input);
9        localStorage.setItem(key, JSON.stringify(storedArr));
10
11        
12        $("#test").append(
13          `<option value="${input}" selected>${input}</option>`
14        );
15      });
16
17      // localStorageに保存したデータをoptionに表示
18      var keys = JSON.parse(localStorage.getItem(key) || '[]');
19      for(i = 0; i < keys.length; i++) {
20        var selectTag = document.getElementById("test");
21        selectTag.insertAdjacentHTML(
22          "beforeend",
23          `<option value="${keys[i]}">${keys[i]}</option>`
24        );
25      }
26    });
27  </script>

別件ですが、HTML断片をJavaScriptから生成するとXSSの危険があります。textContentやsetAttributeなどで、XSSが起きないように構築するようにしましょう。

投稿2019/07/29 04:10

編集2019/07/29 06:03

maisumakun

総合スコア145184

aaas

2019/07/29 05:59

ご回答ありがとうございます。 JSON.parseなどよく見るものの使えるほどの理解がなかったので復習します。またXSSの対策もご提示いただきありがとうございます。ーーーーー言葉足らずですいません、プルダウンに追加する選択肢は複数追加できるようにしたいのです。いただいたコードだと、 `Uncaught SyntaxError: Unexpected token e in JSON at position 0 ` のエラーが発生し、二つ目以降が登録できないようです。。いただいたコードの `var storedArr = JSON.parse(localStorage.getItem(key) || '[]'); ` を `var storedArr = JSON.parse(localStorage.getItem(input) || '[]'); ` とするとプルダウンの選択肢は増えていくのですが、localStorageを見るとkeyが"some-select"だけでvalueが上書きされているようです。また、更新するとプルダウンの選択肢が消えてしまいます。（こちらも言葉不足で申し訳ありません、選択肢は保持しておきたいのです）何か自分の勘違いなどあればご教示いただきたいです。お手数おかけして申し訳ありません、何卒よろしくお願いいたします。