Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Teams

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

I'm making a planner application that allows inputted text to be saved to local storage by the hour and I cannot figure out how to fix my javascript to make it work. HTML:

          <tr class="row" id="17">
            <th scope="time" id="hour17" class="time">17:00</th>
            <td><input type="text" class="textbox" id="h17input" onclick = "savePlan()"></td>
            <td class="btnContainer">
              <button class="saveBtn"><i class="fas fa-save"></i></button>
var input = document.getElementById('input');
function savePlan() {
    localStorage.setItem(input.innerText);
    console.log(input);
    localStorage.getItem(input.innerText)
Thank you!
localStorage.getItem requires a keyName to store the value under a name. And you need to use the value property of the input instead of the innerText.
const button = document.querySelector('.saveBtn');
const input = document.getElementById('h17input');
button.addEventListener('click', savePlan);
function savePlan() {
  localStorage.setItem('plan', input.value);
function getPlan() {
  return localStorage.getItem('plan');
                It didn't quite work, no error messages though. Still trying to troubleshoot. This answer does make sense to me. Not sure why it's not working
– hannahatl
                Jul 23, 2021 at 21:29
                There was a small typo in my getPlan function. And I see that the id of the input in your HTML is different than in your JavaScript. Did that cause it to fail? I've edited my answer.
– Emiel Zuurbier
                Jul 23, 2021 at 21:44
                I tried this and it didn't work. I checked my dev tools and under local storage is just saved 'plan' even though I typed something else in that textbox input. Not sure what the issue is.
– hannahatl
                Jul 24, 2021 at 1:38
                Okay, strangely enough it works but only in firefox. I must be going crazy. My chrome live server extension wont work but firefox does.
– hannahatl
                Jul 24, 2021 at 1:58
                Take a little step back. I'm seeing that your input in the HTML also an onclick attribute. Remove it as it will also call savePlan when clicking on the input, which surely is not what you want.
– Emiel Zuurbier
                Jul 24, 2021 at 9:11
You can think that localstorage works "like" an object, with key and values. If you want to store something there, you need to enter a key (keyName) and a value (your input). Now, if you want to get a value from there, you just need the key.
https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage
So, in your case:
var input = document.getElementById('input');
function savePlan() {
    // store input.value
    localStorage.setItem('myCustomStorage:month', input.value); 
    // return input.value on localStorage
    return localStorage.getItem('myCustomStorage:month') 
I have made something like this:
*Update: I added an id (saveBtn) to the button.
let textbox = document.getElementById('h17input');
let saveBtn = document.getElementById('saveBtn');
saveBtn.addEventListener('click',savePlan);
function savePlan() {
    //localStorage.setItem(input.innerText);
    window.localStorage.setItem("saved_data", JSON.stringify(textbox.value))
    //localStorage.getItem(input.innerText)
    let  savedItem = JSON.parse(localStorage.getItem("saved_data"));
    console.log(savedItem);
        
Thanks for contributing an answer to Stack Overflow!
Please be sure to answer the question. Provide details and share your research!
But avoid …
Asking for help, clarification, or responding to other answers.
Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.