@eguuuuuuuuuuuuuuuuuuuuu (eg uuuuuuuuuu)posted at 2022-05-01

更新しても、入力したリストが残るようにしたい。【localStorage】【JavaScript】

Q&A

解決したいこと

全くの初心者です。。投稿も初めてで見づらいかもしれません。

userlist[]に{id:, name:, address:},を入れていくことでリストを増やす仕組みを作りました。しかし、更新すると全て消えてしまします。
調べたところ、localStorageを使うと良いそうでした。
そして、それを使いconsole.logで記入したuserlist[]内のデータを取得するまで出来ました！

あとは「これを、更新した後のuserlistに残せられれば！」と考えております。
自分でやってみてもうまくいかず、そもそもこのやり方でできるのかわからず。。不安です。

どうかよろしくお願いいたします！！

該当するソースコード

 <h1>【ユーザー一覧】</h1>
    氏名：<input class="fullname" type="text" placeholder="お名前" />　
    出身地：<input class="Home" type="text" placeholder="埼玉 など" />
    <button class="add" id="added">登録</button>
<ul class="user_list" id="listed"></ul>


 <!--　新規登録　-->
    <script>
      const fullnameText = document.querySelector(".fullname");
      const HomeText = document.querySelector(".Home");
      function newpush() {
        userlist.push({
          id: addZero(userlist.length + 1),
          name: `${fullnameText.value}`,
          address: `${HomeText.value}`,
        });
        banish();
        updatelist();
        console.log(userlist);
      }
      document.querySelector(".add").addEventListener("click", () => {
        newpush();
      });
      function banish() {
        fullnameText.value = null;
        HomeText.value = null;
      }
      function addZero(num) {
        return String(num).padStart(4, "0");
      }
    </script>


  <!--　配列内要素の処理　--><!--　昇順降順　-->
    <script>
      const userlist = [];
      function updatelist() {
        let listHtml = "";
        for (const data of userlist) {
          listHtml += `<li>ID【${data.id}】 ${data.name}： ${data.address}</li>`;
        }
        document.querySelector(".user_list").innerHTML = listHtml;
        const setjson = JSON.stringify(userlist);
        localStorage.setItem("mykey", setjson);
        const userlisted = localStorage.getItem("mykey");
        console.log(userlisted);
      }
        updatelist();
    </script>

自分で試したこと

localStorageをfunctionの外に持っていくと、エラーが出ました。

0 likes

2Answer

@mouseofmicky posted at 2022-05-01

登録はきちんと成功しているようなので、あとはドキュメントのロード時にそれを取得してリストを更新すればよいのです。それにはwindow要素のloadイベントを利用します。

   <!--　配列内要素の処理　--><!--　昇順降順　-->
     <script>
-      const userlist = [];
+      let userlist = [];
       function updatelist() {
         let listHtml = "";
         for (const data of userlist) {
           listHtml += `<li>ID【${data.id}】 ${data.name}： ${data.address}</li>`;
         }
         document.querySelector(".user_list").innerHTML = listHtml;
         const setjson = JSON.stringify(userlist);
         localStorage.setItem("mykey", setjson);
         const userlisted = localStorage.getItem("mykey");
         console.log(userlisted);
       }
+
+      window.addEventListener('load', function() {
+        userlist = JSON.parse(localStorage.getItem("mykey")) || [];
         updatelist();
+      });
     </script>

※userlistがconstで宣言されていると微妙に面倒なコードになるのでletに直させて頂きました。

1Like

Comments

@eguuuuuuuuuuuuuuuuuuuuu
Questioner
うあああああ！！できました！

ありがとうございます！
こんなに早く回答していただけるとは！感謝の気持ちでいっぱいです。

このサイトを利用しようか正直迷っていましたが、質問して良かったです。
大変ありがとうございました。今後も勉強に励みたいです！

@sfgjr7a posted at 2022-05-01

コードを拝見すると、ロード時に空のデータでストレージデータを更新してしまっている、保存済みのストレージデータを取得して画面に反映する処理が無い等、いくつか不備があるようです。

とりあえず、必要最低限の機能で動作するよう組んでみました。

<h1>【ユーザー一覧】</h1>
氏名：<input class="fullname" type="text" placeholder="お名前" />　
出身地：<input class="Home" type="text" placeholder="埼玉 など" />
<button class="add" id="added">登録</button>
<ul class="user_list" id="listed"></ul>

<script>
const storage = {
  key: 'uniqueKey',
};
storage.data = localStorage.getItem(storage.key);
storage.data = storage.data !== null ? JSON.parse(storage.data) : [];

document.addEventListener('DOMContentLoaded', () => {
  const listed = document.getElementById('listed');
  const display = data => listed.insertAdjacentHTML('beforeend', `<li>ID【${`${data.id}`.padStart(4, '0')}】 ${data.name}： ${data.address}</li>`);

  for(const data of storage.data) display(data);

  document.getElementById('added').addEventListener('click', () => {
    const name = document.querySelector('.fullname');
    const home = document.querySelector('.Home');
    if(name.value.trim() === '' || home.value.trim() === '') return;

    const newData = {
      id: storage.data.length + 1,
      name: name.value.trim(),
      address: home.value.trim(),
    };

    storage.data.push(newData);
    localStorage.setItem(storage.key, JSON.stringify(storage.data));
    display(newData);
    name.value = home.value = '';
  });
});
</script>

1Like

Comments

@eguuuuuuuuuuuuuuuuuuuuu
Questioner
コメントありがとうございます！

1件目の解答で、ようやく動かせるようにはなったのですが、
まだまだ自分のコードは読みづらいですよね！！改善策ありがとうございます。

@sfgjr7aさまのように読みやすく、不備のないものを自分でも作れるよう、このコードについての調べを進めていきたいと思います！

恥ずかしながら、丸2日悩んでいたので、2件の解答者さま　本当にありがとうございます。

Are you sure you want to delete the question?

更新しても、入力したリストが残るようにしたい。【localStorage】【JavaScript】

解決したいこと

該当するソースコード

自分で試したこと

2Answer

Comments

Comments

Your answer might help someone💌