How to save data to LocalStorage and retrieve when reopen browser

Question

I created a simple website to add and delete items in to do list where the user is able to input items and add to the current list. I want users to be able to save current list and when they open from same browser, they can see the previously edited list from last time. In other word: using Local Storage function to achieve this (not using any server side scripting or database). Not sure how I can achieve this by user hitting save button. Here is my html code:

<html>
<body>
    <div id="myDIV" class="header">
        <h1>My To Do List</h1>
        <input type="text" id="myInput" placeholder="Add to the list">
        <span onclick="addToList()" class="addBtn">Add</span>
    </div>

    <ul id="myUL">
        <li>Go to grocery</li>
        <li>Pay bills</li>
        <li>Go to class</li>
        <li>Clean home</li>
        <li>Do laundry</li>
        <li>Do homework</li>
    </ul>

    <button onclick="saveList()" type="button">Save</button>

    <script src="index.js"></script>
</body>

Here is my JavaScript code:

function addToList() {
  var li = document.createElement("li");
  var inputValue = document.getElementById("myInput").value;
  var tn = document.createTextNode(inputValue);
  li.appendChild(tn);

  if (inputValue === '') {
    alert("You must write something!");
  } else {
    document.getElementById("myUL").appendChild(li);
  }
  document.getElementById("myInput").value = "";

  var span = document.createElement("SPAN");
  var txt = document.createTextNode("\u00D7");
  span.className = "close";
  span.appendChild(txt);
  li.appendChild(span);

  for (i = 0; i < close.length; i++) {
    close[i].onclick = function() {
    var div = this.parentElement;
    div.style.display = "none";
    }
  }
}

The saveList() function is what I want to define to allow users to save the list so that they can close the browser and reopen with saved data retrieved from local storage. Hope that makes sense.

Does this answer your question? [Storing Objects in HTML5 localStorage](https://stackoverflow.com/questions/2010892/storing-objects-in-html5-localstorage) — Chris, Nov 16 '19 at 02:24

xTrimy · Answer 1 · 2019-11-16T02:19:14.547

1

In function addToList you can simply push() the data that you want and then add it to the localStorage:

var data = [];

function addToList(){
    //Code...
    data.push("What Ever");
    window.localStorage.setItem('data', JSON.stringify(data));
    //Code...
}

You can add the window.localStorage part in saveList() instead of addToList(), both will work fine

Finally, when you need to retrieve it just parse this stringified JSON into an array:

var data = JSON.parse(localStorage.getItem("data"));

Also read: LocalStorage and How do I store an array in localStorage?

edited Nov 16 '19 at 02:19

answered Nov 16 '19 at 02:12

xTrimy

804
9
23

should I put the statement for retrieving data in onload() since I want the data to be retrieved every time browser is reload/reopen? – Jenny Nov 16 '19 at 03:21
Yes you can add it in onload() but you can also add it without onload, both will work fine :) – xTrimy Nov 16 '19 at 03:26

score -1 · Answer 2 · answered Nov 16 '19 at 02:12

It seems that what you're looking for is to save your application state in your browsers local storage or in your browser's cookies..

Take a look at this SO answer: How to store this data in cookies?

This being said, if you do choose to save your users' information as cookies, those cookies can readily be deleted by your users, and, additionally, some browsers will regularly clear cookies for many different reasons:

https://helpcenter.verticalresponse.com/articles/VR2/Browser-Hygiene-The-Importance-of-Clearing-Cache-and-Cookies

How to save data to LocalStorage and retrieve when reopen browser

2 Answers2