将输入文本保存到本地存储时遇到问题

Question

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>
            </td>
          </tr>

JS:

var input = document.getElementById('input');

function savePlan() {
    localStorage.setItem(input.innerText);
    console.log(input);
    localStorage.getItem(input.innerText)
};

Thank you!

Answer 1

need 2 parameters : localStorage.setItem(keyName, keyValue); . You are missing keyName

https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage

Answer 2

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');
}

Answer 3

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') 
};

Answer 4

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);
};