Avoid Losing Text when Refreshing the Browser with localStorage
This example uses a textarea as a scratchpad where you can write notes that will automatically save the content to the browser. The content is saved even if you refresh or quit out of the browser.
Instructor: [0:00] We'll start by adding a text area to our index.html. We'll name it Scratchpad and give it an ID of Scratchpad. Inside of our index.js, we can document query selector and select the ID with #Scratchpad. Then we'll assign a variable of Scratchpad to that result. Right now, when we refresh we have our text area, and this will represent that text area.
[0:32] Let's go ahead and add an event listener. Add event listener to our Scratchpad. We'll check for the key-up where one releases a key on the keyboard and pass in a callback where we can handle the event.
[0:46] Right now, we'll just console log-out the event. If I refresh, and I type something, you can see all these keyboard events coming through.
[0:56] To store the data of the Scratchpad in a browser, we can use what's called local storage, and say, set item. We'll call this notes. We want to set that to the event.target.value, which is the event is that keyboard event, the target is this text area, and the value is the data inside of it. You'd get the same result by using scratchpad.value, so either method would work fine.
[1:23] If I refresh now and I start typing, and I go over to the application, I'll check the local storage. You can see that we have a key of notes and a value of start-typing. Every time I type something new this updates. When I refresh, it goes away even though this value stays in the browser.
[1:48] To get that value out, let's say scratchpad.value equals localstorage.get-item-and-get-the-notes. We'll hit save there. When I hit refresh now, it'll populate the text area with the notes from our local storage.
[2:08] Saving its value every keystroke is pretty aggressive, so let's set up a way to only save if we stop typing for about a second. In our event handler, we're going to create a set timeout that takes a function to run after a duration, so I'll put one second.
[2:28] It's going to run the code I put into inside here after one second has passed after a key-up. If I console log event.target.value and go back to the console, there is a one-second delay. You can see these values coming in one second after a keystroke.
[2:51] That's not quite the behavior we want. We actually want to cancel this timeout if another key is pressed before the timeout has expired. We can set up a cancel, so let cancel, and assign it to this timeout because this cancel returns a reference to that timer.
[3:08] We can simply check if the cancel exists then clear the timeout with the ID of cancel, which means you press a key, it checks to see if cancel exists. If it does, it clears it. Now the behavior, if I refresh, you see output when I stop typing for one second, and you saw that disappeared one second after I was done typing.
[3:34] Instead of just logging this out here, let's go ahead and set our local storage in here. I'll paste that in there. Now we can switch back over to our application. I'll refresh here, and I'll clear this out and start typing. You'll see this will update one second later. Type some more and that updates after one second of delay.