ローカルストレージを使って、ユーザー一覧を取得したい。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="css/login.css">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
        integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    <title>Document</title>
</head>

<body>
    <div class="users">
        <h2>ユーザー一覧</h2>
        <form id="user">
            <input type="text" id="pages"  required>
            <input type="text" id="limits" required>
            <input type="text" id="querys">
            <div align="center">
                <button id="post-lgtbtn" class="btn btn-orange">ユーザを検索</button>
            </div>
        </form>
    </div>
    <div id="userrs" class="row row-cols-1 row-cols-md-3" >
        <!-- <div class="col mb-4">
          <div class="card h-100">
            <img src="img/ryusei.jpg" class="card-img-top" alt="...">
            <div class="card-body">
              <h5 class="card-title">横浜海斗</h5>
              <p class="acount">@ryuusei_tan</p>
              <p class="card-text">私の名前は横浜海斗です。身長160センチで趣味はゲートボールをすることです。みんなフォローしてくれよな？
              </p>
            </div>
          </div>
        </div> -->
        <div class="col mb-4">
          <div class="card h-100">
            <!-- <img src="img/ryusei.jpg" width="200px" hriht="200px" class="card-img-top" alt="...">
            <div class="card-body">
              <h5 class="card-title">横浜海斗</h5>
              <p class="acount">@ryuusei_tan</p>
              <p class="card-text">私の名前は横浜海斗です。身長160センチで趣味はゲートボールをすることです。みんなフォローしてくれよな？</p>
            </div> -->
          </div>
        </div>
        <div class="col mb-4">
          <div class="card h-100">
            <!-- <img src="img/ryusei.jpg" class="card-img-top" alt="...">
            <div class="card-body">
              <h5 class="card-title">横浜海斗</h5>
              <p class="acount">@ryuusei_tan</p>
              <p class="card-text">私の名前は横浜海斗です。身長160センチで趣味はゲートボールをすることです。みんなフォローしてくれよな？</p>
            </div> -->
          </div>
        </div>
        <div class="col mb-4">
          <div class="card h-100">
            <!-- <img src="img/ryusei.jpg" class="card-img-top" alt="...">
            <div class="card-body">
              <h5 class="card-title">横浜海斗</h5>
              <p class="acount">@ryuusei_tan</p>
              <p class="card-text">私の名前は横浜海斗です。身長160センチで趣味はゲートボールをすることです。みんなフォローしてくれよな？</p>
            </div> -->
          </div>
        </div>
      </div>
    <script src="../dist/js/bundle.js"></script>
    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
        integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous">
    </script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
        integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous">
    </script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
        integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous">
    </script>
</body>
</body>

</html>

// ユーザー一覧
const getinfo = document.getElementById('post-lgtbtn');
const user_page=document.getElementById('pages');
const user_limit=document.getElementById('limits');
const user_query=document.getElementById('querys');
const　url=('https://teachapi.herokuapp.com/users?');
if (!localStorage.token) {
  window.location.href = 'login.html';
}
console.log(localStorage.token)
const sendHttpRequestlgt = (method, url) => {
  return fetch(url, {
      method: method,
      headers: {
        'Content-Type': 'application/json',
        'Authorization': 'Bearer ' + localStorage.token
      }
    })
    .then(response => {
      if (response.status >= 400) {
        // !response.ok
        return response.json()
          .then(errResData => {
            const error = new Error('Something went wrong!');
            error.data = errResData;
            throw error;
          });
      }
      return response.json();
    });
};
const sendlgdData = () => {
  sendHttpRequestlgt('GET',url )
    .then(json => {
      const params = url+ new URLSearchParams({ "page":user_page.value, "limit" : user_limit.value,"query":user_query.value })
      const markup = `<div class="col mb-4"><div class="card h-100"><img src="img/ryusei.jpg" class="card-img-top" alt="...">
        <div class="card-body">
          <h5 class="card-title">${localStorage.name}</h5>
          <p class="acount">＠${localStorage.token}</p>
          <p class="card-text">${localStorage.bio}</p>
        </div>
      </div>
    </div>`;
      const h=document.getElementById('userrs');
      h.insertAdjacentHTML('beforeend', markup);
      console.log(json.stringify);
    })
    .then(responseData => {
      console.log(responseData);
    })
    .catch(err => {
      console.log(err, err.data);
    });
};
if (getinfo) {
  getinfo.addEventListener('click', sendlgdData);
}

[ユーザー一覧]
GET https://teachapi.herokuapp.com/
パラメーターが
query parameterで

page: ページの番号(数字)
limit: 1ページあたり何個あるか
query: 単語を入れると検索できる

headerにtoken入れる

ヒントはこちらのみです。

現在、SNSアプリをAPIを叩いて作っております。
インプットに文字を入力したら今まで、登録してあるユーザーの一覧を表示したいのですが、うまくできませんでした。
しかし、ユーザー登録ボタンを押したら一番新しく登録したデータのみ取得することができました。
inputに文字を入力して、そユーザー検索のボタンを押すと、ネットワークのところにすらログが残っておりませんでした。
対処法を知ってる方がいましたらご教授していただければ幸いです。

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

回答1件

ベストアンサー

localStorage は簡易的な キー・バリュー・ストア です。

localStorage[{string}uniqueKey] = {string}value

inputに文字を入力して、そユーザー検索のボタンを押すと、ネットワークのところにすらログが残っておりませんでした。

ご質問のコードは uniqueKey name, token, bio を毎回上書きしています。

リストを保存したい場合、

ユニークなキーを決める。
保存する値は JSON.stringify(), JSON.parse() で JavaScript で走査プログラムを書く。

javascript
1  let userList = [
2    { name:"username", token:"token", bio:bio },
3    :
4    
5  ];
6  // 保存
7  localStorage["users"] = JSON.stringify( userList );
8  // 読込
9  let users = JSON.parse( localStorage["users"] );