How to have constantly updated data in localStorage?

user_16275980 0
Viewed 237

I have been trying to find a way to not have to refresh to see new and updated data from localStorage. I have a text box currently, with a submit button on the side. Once you type something into the text box and click "submit", the text you put gets saved into localStorage. I then displayed it below the text box. All of this works fine, but the only problem is that the data in localStorage doesn't get displayed right away, you have to reload the page. I would like the data to constantly update, so you don't have to reload the page each time you want to see data from localStorage. This is what I have so far:

//"saves" is the id I assigned to the div that stores the saves.
document.getElementById('saves').innerHTML = localStorage.getItem('item-array-HTML-program');

//save() gets called when the submit button is clicked.
function save() {
    //data is an empty array, and the variable "var" is the textboxes.value
    var data = [], val = document.getElementById('textbox').value;         
    //the data that's already been stored in the HTML program key gets pushed into the empty array 
    "data"
    data.push(localStorage.getItem('item-array-HTML-program'));
    //the text in the text box gets pushed into the array "data"
    data.push(val);
    //the array "data" gets set into localStorage.
    localStorage.setItem('item-array-HTML-program', data);   
}
javascript
2 Answers

you could try something like this:

//at least I believe this is what you use to "render" it...
function render() {
    document.getElementById('saves').innerHTML = localStorage.getItem('item-array-HTML-program');
}


function save() {
    ...
    save code
    localStorage.setItem('item-array-HTML-program', data); 
    ...
    // once its saved, you call a render
    render()
}

abstract all the code you need to render whatever it is you're rendering and then after calling the save function, you render it again.

user_132167970

You're only updating the "saves" value once

The main issue is that you are only updating the "saves" container value once, which is when the page loads (line 2:4), that's why you never see it updating when clicking the "Save" button.

So in order to see a "live" update, you need to update the "saves" container value every time you save a new one.

Best practices

  1. Try to query the "document" object as less as you can. Creating global variables with the HTML references to the objects you need should do the job.

  2. As BrunoNoriller suggested, I would create a separate render() function to prevent code repetition and improve maintainability

  3. Create as less variables as you can, you can straight init the array "val" with values you want. This is probably irrelevant in small applications but can make a big difference in maintainability for medium/large sized apps.

var display = document.getElementById('saves') // ¹
var textbox = document.getElementById('textbox') // ¹
var lsname = 'item-array-HTML-program'

// Updates the inner value of the 'saves' container ²
function render() {
  display.innerHTML = localStorage.getItem(lsname); 
}

// Save new data to localStorage and re-render
function save() {
    var data = [
      localStorage.getItem(lsname), // Single variable with both textbox
      textbox.value                 // and localStorage values ³
    ]
    localStorage.setItem(lsname, data); 
    render()
}

// Render the current value of localStorage when the page loads
render()

I know it is more than you asked for, but I hope I could help you in some way

user_108723160
Related