Now let's look at how we can persist our data between page refreshes. When we reload our page, we want to pick up from where we left off with any JSONs we added still visible in our list. JSON this, we're going to leverage a browser local storage. The local storage and session storage properties, allow you to save key value pairs in a web browser.

The local storage object stores data, with no expiration date. The data will not be deleted when the browser is closed. This differs from session storage, which will be deleted when a user closes their browser. Again, there are many ways we could do this, but here we're going to utilize original JSON data structure and store this in local storage. so that we can persist the state of our app. Let's reinstate some of our sample JSON, to remind ourselves of the data structure we can use.

Let's review each of these properties. User ID would refer to the logged in User ID if we were building a multi-user app. Since we're only building a local app for our own use, in this case, we don't really need a User ID field. So let's remove that. The ID field is the ID of a JSON. Again, if we were connecting to a remote API and pulling down JSON data from a central database, an ID would be an important property and it would represent the primary key of each JSON. In this local example, though, we don't need it. So we'll remove it for now.

We need the title because that contains the text of the JSON. The completed attribute would be useful if we were implementing a feature to allow us to mark JSONs as complete. We may do this in the future so let's leave this property as part of the data structure. We can default it to false for each JSON for the time being. So the JSON for each JSON we want to persist, will look like this. Let's see how to use local storage next.

Local storage can only store string values so to store JSON, we're going to need to stringify or serialize the JSON to turn it into a plain string. When we retrieve the data from local storage as a string, we can then deserialize or parse the string into a JSON object. Let's get to it.

We'll comment out our sample JSON at this point, we don't want to delete it entirely, as it will be useful to see it to remind ourselves of the structure we're aiming for. Now we can populate JSON data. The equivalent values stored in local storage will also add an if statement here, because otherwise we'll get an error when JSON data is empty. Trying to call for each on a null object or error and we want to keep our code clean and error free. Then we'll create a store JSON local function.

We've added some comments in the code here just to make things easier to understand. It's worthwhile remembering to document your code. So it's easier to maintain, both for yourself and other developers who may have to work with your code in the future. Other reference to store JSON local from adding a new JSON from the forum on the page.

Now, let's test how things are looking in the browser. Let's switch to the application tab of our developer tools and open the local storage section. So we'll be able to see what's happening with local storage. Let's add a new JSON. And we can see some data now being stored in local storage under the JSON data key. If we click on that and expand the data, we can see a JSON object, great.

Now, the moment of truth. Let's refresh the page. And this JSON we added is still there. We have successfully persisted our data. Okay, let's see what happens if we delete that JSON, we can see it disappears, which is great. But let's refresh the page again, the deleted JSON comes back, so we need to hook up our delete function to update local storage as well.

Let's try to do this now. Let's look at the delete JSON function and plan what we need to do. We need to get the existing local storage data, remove the JSON we want to delete, then update local storage. So retrieving and updating the local storage data is easy. We've done that already. But how do we target the JSON we want to delete?

Let's go back to our JSON creation code and attach an ID to each of our JSON elements. This way, we'll be able to reference this we want to delete one. First we're going to make a few changes to our new JSON function. We're going to add the JSON ID as a possible parameter we can pass in line 65. We'll be using this for when we create a JSON list on page load. For creating new JSONs from the add new form, we don't pass in values for these parameters. So the code block within the if statement is executed for new JSONs only.

Here we've updated the core to store a JSON ID value from the return value of the store JSON a local function. We will need to update this function to actually return an ID. So we'll do that shortly. On line 72, we can use the data set object to store any number of data attributes on the DOM element. Here we're storing an ID value on the list item. This will make it possible for us to uniquely identify each list item in the HTML DOM when we try to delete them.

Now let's go and modify our store JSON local function. So let's return an ID. We're creating a new JSON Id based on the length of the existing local storage array. This will surface for the purposes of our demo. But for an app connected to a back end API, it's likely the API itself would generate and return a unique ID. We will modify our JSON object structure for it JSON by adding an ID attribute. We're also returning the JSON ID at the end of the function.

In our delete JSON function, we can now implement the line of code which will delete the relevant JSON from the JSON temporary, which we then save back to local storage. Lastly, we're modifying the code that creates the JSON items on our page. When we load the page. We are checking whether each item in the local storage JSON data is a valid object. And if it is, we'll create the new JSON we need JSON this because when we delete an item from the JSON data array, it leaves the index value in place, but sets the value to null.

Pause the video and take some time to review all of these code changes in more detail if you need to. Now, let's test it all out. We'll add some JSONs. Then it's deleted JSON from the middle of the list. Add another one. We can see JSON data and the develop tools updating as we do this. We'll end refresh the page and make sure our JSON list persist. That all seems to work well.

Applied Javascript: Building a To-do App, Part 2

About