如何计算LocalStorage中存储的数字总和？

Question

I am new to JSON, so bear with me!

I am working on a website that stores values to LocalStorage via inputs. Each form input has the following function (only difference is formInput2, formInput3)

function formInput(e) {
  // Save userInput from input
  // Get form values 
  var input = document.querySelector('.input').value;
  this.style.visibility = 'hidden';
  smtBtn.style.display = 'inline-block'
  var userInput = {
    answer: input
  }

  // Test if bookmark is null
  if (localStorage.getItem('bookmarks') === null) {
    // Init Array
    var bookmarks = [];
    // Add to array
    bookmarks.push(userInput);
    // Set to LocalStorage
    localStorage.setItem('bookmarks', JSON.stringify(bookmarks));
  } else {
    // Get Bookmarks from LocalStorage 
    var bookmarks = JSON.parse(localStorage.getItem('bookmarks'));
    // Add bookmark to array 
    bookmarks.push(userInput);
    // Reset back to LocalStorage
    localStorage.setItem('bookmarks', JSON.stringify(bookmarks));
  }

  // Refetch bookmarks
  fetchBookmarks();

  // Prevent form from submitting
  e.preventDefault();
}

I need to add the three numbers that are in local storage, and I am using this function:

function bookmarkMath() {
   var bm1 = JSON.parse(localStorage.getItem('bookmarks')),
    total = 0,
    i;
  for (i = 0; i < bm1.length; i++) {
    total += bm1[i].answers;
  }
  console.log(total);
}
}

But alas, my output is NaN. :(

Any help would be very appreciated!!!!!!!

edit: In dev tools, this is what I get back with console.log(LocalStorage) - the numbers I have entered in the form on the site.

    Storage {bookmarks: "[{"answer":"2"},{"answer":"4"},{"answer":"5"}]", length: 1}
    bookmarks: "[{"answer":"2"},{"answer":"4"},{"answer":"5"}]"
    length: 1
    __proto__: Storage

Edit 2: I have updated the second ]function to include the JSON.parse. But now I am getting just the numbers 0245 as my result, NOT the sum of 0+2+4+5. Any help?? :p

Answer 1

You are on the right track by doing JSON.parse() . However, the value is in a string. You can see quote at the value it is mean will be threated as a string. You should convert it to number format like following:

total += parseInt(bm1[i].answers);


If you don't want to do parseInt() then your output should be :

{"answer": 2} //this one mean your value is Number 

Instead:

{"answer":"2"} //this one mean your value is in String

Answer 2

I think I see it ... this statement looks "wrong, yet something that JavaScript would accept!"

  var bm1 = JSON.parse(localStorage.getItem('bookmarks')),
    total = 0,
    i;

Notice the commas.

Instead, write this as three separate lines:

var var bm1 = JSON.parse(localStorage.getItem('bookmarks'));
var total = 0;
var i;

Answer 3

const bookmarks = JSON.parse(localStorage.getItem('bookmarks')) || []
const totalAnswers = bookmarks.map(o => +o.answer).reduce((a, b) => a + b)