How to use local storage to save values and render them back on the page when I close and reopen the page(or refresh)?

Question

I am creating a Workday Scheduler that has divs for 9 AM- 5 PM. I want the text inputted into the text area to be saved in local storage and to remain on the page if it gets closed or refreshed. How do I write this in Javascript?

<!--9 am block -->
<div style="padding: 5px" id="hour-9" class="row time-block">
  <div class="col-md-1 hour">9 AM</div>
  <textarea class="col-md-10 description"></textarea>
  <button class="col-md-1 btn saveBtn"><i class="fas fa-save"></i></button>
</div>

This platform is not meant to provide code for you. You can google how to use localStorage or provide some code example that doesn't work and ask a more specific question. — tommueller, Jan 22 '20 at 23:08
It looks like you want us to write some code for you. While many users are willing to produce code for a coder in distress, they usually only help when the poster has already tried to solve the problem on their own. A good way to demonstrate this effort is to include the code you've written so far, example input (if there is any), the expected output, and the output you actually get (console output, tracebacks, etc.). The more detail you provide, the more answers you are likely to receive. Check the [FAQ] and [ask]. — Austen Holland, Jan 22 '20 at 23:19
Does this answer your question? [save input values to localstorage & "bind" it with HTML element](https://stackoverflow.com/questions/32547329/save-input-values-to-localstorage-bind-it-with-html-element) — Heretic Monkey, Jan 22 '20 at 23:33

score 0 · Answer 1 · answered Jan 22 '20 at 23:24

You can use the script tag to insert JavaScript. We can also take advantage of the 'change' and 'load' event listeners available through the window API.

<div style="padding: 5px" id="hour-9" class="row time-block">
    <div class="col-md-1 hour">9 AM</div>
    <textarea class="store-me"></textarea>
    <button class="col-md-1 btn saveBtn"><i class="fas fa-save"></i></button>
    <script>
        var myTextBox = document.querySelector('.store-me');
        const localKey = 'cachedText';

        window.addEventListener('load', function() {
            const cachedValue = localStorage.getItem(localKey);
            myTextBox.value = cachedValue;
        })

        myTextBox.addEventListener('change', function(e) {
            localStorage.setItem(localKey, e.target.value)
        });
    </script>
</div>

Please answer well-asked questions, not poorly asked questions like the current one. See [answer]. — Heretic Monkey, Jan 22 '20 at 23:30

score 0 · Answer 2 · answered Jan 22 '20 at 23:54

This doesn't work in Stack Overflow, but the basic gist of localStorage is like so:

const textEl = document.getElementById("Text");
textEl.value = localStorage.getItem("myText");
textEl.addEventListener("input", () => localStorage.setItem("myText", textEl.value));

<input type="textbox" id="Text">

How to use local storage to save values and render them back on the page when I close and reopen the page(or refresh)?

2 Answers2