How to store multiple data of the same kind in local storage?

Question

I was trying to make a Learning to-do list for PHP. I used bootstrap classes: collapse and list-group. Each list tag has 2 badges which serve for counters.

Badge 1 = no of time I learnt or revise the chapter.

Badge 2 = no of time I actually used the concept from the chapter.

When I click on the badges, the number on them should increase by one. I will add options for adding new chapters and sub chapters later.

For now, I want to save the values of the badges on my local storage for later use.

When I refresh the page, all the badges should be updated with their current values.

I already know how to get and retrieve data from local storage, but I do not know how to implement it in the current situation.

 var badges= document.querySelectorAll('.badge'); badges.forEach(function (e) { e.addEventListener('click', incrementBadge); }); function incrementBadge(e){ let num =Number(e.target.textContent)+1; e.target.textContent=num; } 

 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous"> <div class="container mt-5"> <div class="row"> <div class="col-lg-6"> <button class="btn btn-block btn-info" data-toggle="collapse" data-target="#php">Php</button> <div class="collapse" id="php"> <ul class="list-group mt-0"> <li class="list-group-item">Iteration <span data-type="revise"class="badge badge-info float-right">4</span> <span data-type="practice" class="badge badge-success float-right mr-3">2</span> </li> <li class="list-group-item">Selection <span data-type="revise" class="badge badge-info float-right">0</span> <span data-type="practice" class="badge badge-success float-right mr-3">2</span> </li> </ul> </div> </div> </div> </div> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script> 

Answer 1

Now that you've established a codebase that stores the data, your problem of getting the data becomes trivial. You already iterate over badges, so in that same step, you can easily set the value based on the local storage. If the key doesn't exist in local storage, .getItem will return null . This allows you to set a default value using a logical OR operator. Your "getting" code can be as follows:

let key = e.parentNode.getAttribute('data-id') + '.' + e.getAttribute('data-type');
e.textContent = localStorage.getItem(key) || 0;

StackOverflow sandboxes the snippet editor, so the local storage code in the following snippet is commented out. You can, however, see it in action in this fiddle .

There are other approaches you can take to store these values. This is just a rudamentary approach, but hopefully this helps you on your way to makeing a fully fleshed out application.

 var badges= document.querySelectorAll('.badge'); badges.forEach(function (e) { let key = e.parentNode.getAttribute('data-id') + '.' + e.getAttribute('data-type'); //e.textContent = localStorage.getItem(key) || 0; e.addEventListener('click', incrementBadge); }); function incrementBadge(e){ let num =Number(e.target.textContent)+1; let key = e.target.parentNode.getAttribute('data-id') + '.' + e.target.getAttribute('data-type'); //localStorage.setItem(key, num); e.target.textContent=num; } 

 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous"> <div class="container mt-5"> <div class="row"> <div class="col-lg-6"> <button class="btn btn-block btn-info" data-toggle="collapse" data-target="#php">Php</button> <div class="collapse" id="php"> <ul class="list-group mt-0"> <li class="list-group-item" data-id="iteration">Iteration <span data-type="revise"class="badge badge-info float-right">4</span> <span data-type="practice" class="badge badge-success float-right mr-3">2</span> </li> <li class="list-group-item" data-id="selection">Selection <span data-type="revise" class="badge badge-info float-right">0</span> <span data-type="practice" class="badge badge-success float-right mr-3">2</span> </li> </ul> </div> </div> </div> </div> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>