title: I have a problem. When I save my data in localStorage it loses reduce. And shows me the data inside like 0,23,20,11 Instead of a uniform result
body: <p>I have a problem.
  When I save my data in localStorage it loses reduce.
  And shows me the data inside like 0,23,20,11
  Instead of a uniform result.</p>
  <p>When I add the products everything is updated superbly.
  It makes me reduce and puts me the data evenly.
  But that I disconnect from the user and reconnect.
  It shows me the data like 0,23,20,11
  (According to the products I added at the beginning).
  I have a problem that it does not save me the reduce and breaks them down for me.</p>
  <pre><code>/*Class*/
  const LoginBtn = document.querySelector('.login__btn');
  const inputLoginUsername = document.querySelector('.login__input--user');
  const inputLoginpin = document.querySelector('.login__input--pin');
  const main_body = document.querySelector('.main-body');
  const userUX = document.querySelector('.user');
  const items = document.querySelector('.list-group-item');
  const proteinInfo = document.querySelector('.protein');
  
  let currentAccount;
  
  /*Profiles*/
  
  const profile1 = {
    username: 'Daniel',
    pin: 1234,
    protein: [0],
  };
  
  /*Attracting users*/
  const profiles = [profile1];
  
  /*Foods*/
  const foods = new Map([
    ['קוטג', 23],
    ['ביצה', 11],
    ['יוגורט Pro', 20],
    ['טונה', 23],
  ]);
  
  /*Login Btn*/
  LoginBtn.addEventListener('click', function (e) {
    e.preventDefault();
    currentAccount = profiles.find(
      acc =&gt; acc.username === inputLoginUsername.value
    ); // find user
  
    if (currentAccount?.pin === Number(inputLoginpin.value)) {
      main_body.style.opacity = 100;
      userUX.textContent = `${currentAccount.username}`;
      inputLoginpin.value = inputLoginUsername.value = '';
  
      proteinInfo.textContent = localStorage.getItem('SaveProtein');
    }
  });
  
  foods.forEach(function (value, index, arr) {
    const html = `&lt;li class=&quot;&quot;&gt; &lt;button id=&quot;add&quot; class=&quot;btn btn-primary add-item&quot; data-protein=&quot;${value}&quot;&gt;הוסף&lt;/button&gt;
      &lt;strong&gt;${index}&lt;/strong&gt; כמות חלבון ${(proteinValue = value)}&lt;/li&gt;&lt;hr&gt;`;
    items.insertAdjacentHTML('afterbegin', html);
  });
  
  document.querySelectorAll('.add-item').forEach(ele =&gt; {
    ele.addEventListener('click', function (e) {
      currentAccount.protein.push(e.target.getAttribute('data-protein'));
      protein = currentAccount.protein.reduce((acc, val) =&gt; acc + Number(val), 0);
      proteinInfo.textContent = protein;
      localStorage.setItem('SaveProtein', currentAccount.protein);
    });
  });
  </code></pre>
  <p><strong>Before I log out of the user</strong>
  <a href="https://i.stack.imgur.com/rzrvy.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/rzrvy.png" alt="enter image description here" /></a></p>
  <p><strong>After I reconnect to the user.
  This is what the problem is for me</strong>
  <a href="https://i.stack.imgur.com/7T1gy.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/7T1gy.png" alt="enter image description here" /></a></p>