Storing an input field value in a localStorage

Asked

Viewed 35 times

0

I’m trying to get the content of an input field in html:

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="text" name="tarefa" placeholder="Insira sua tarefa">

    <button onclick="Value1()">Pegar dado</button>

    <button onclick="limpar()">Limpar localStorage</button>


    <button onclick="exibir()">Exibir</button>
    <script src="script.js"></script>
</body>
</html>

View my Javascript

//Função para pegar o dado
function Value1()
{
alert(localStorage.setItem('arquivo1', document.body.tarefa.value));
}


//Função para exibir o que foi pego
function exibir(){
    alert("O valor guardado e: " + localStorage.getItem("arquivo1"))
}


//Função para apagar o que esta definido no localStorage
function limpar(){
    localStorage.removeItem("arquivo1");

But when I click to display Alert, which is giving indefinite, I could not find a solution to this problem.

My new code is: Even so, it keeps appearing with null value.

//Função para pegar o dado
function Value1()
{

var tarefa = document.querySelector("#tarefa").value;
localStorage.getItem("arquivo1", tarefa);
console.log(tarefa);
}


//Função para exibir o que foi pego
function exibir(){
    alert("O valor guardado e: " + localStorage.getItem("arquivo1"))
}


//Função para apagar o que esta definido no localStorage
function limpar(){
    localStorage.removeItem("arquivo1");
}
javascript html localstorage

  • can share the entire html? where is the element tarefa? The program is trying to access the value of this element, but is not succeeding, because it is not defined in the html you shared.

  • Okay, I added all the html code

  • Your problem is here document.body.tarefa.value, there is no such syntax in Javascript, you can take the value of input by id, tag, class, querySelector, querySelectorAll.

  • I commented on another code, yet it keeps appearing as null.

  • Yes it will continue as nulo pq is taking input value by id Document.querySelector("#task"). value only in his HTML have no input with id task!

1 answer

0


The value appears as null because its input does not have id, also in function Value1 you are using localStorage.getItem, used to fetch a value saved on localStorage.

Refactored code:

<!DOCTYPE html>
<html lang="pt-BR">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <input
      type="text"
      name="tarefa"
      placeholder="Insira sua tarefa"
      id="tarefa"
    />

    <button onclick="saveDataToLocalStorage()">Pegar dado</button>
    <button onclick="clearLocalStorage()">Limpar localStorage</button>
    <button onclick="showLocalStorageData()">Exibir</button>

    <script src="script.js"></script>
  </body>
</html>

/**
 * Função para salvar os dados digitados na input
 * para o localStorage
 */
function saveDataToLocalStorage() {
  const tarefa = document.querySelector("#tarefa").value;
  localStorage.setItem("arquivo1", tarefa);
  console.log(tarefa);
}

/**
 * Função para exibir o dado salvo no localStorage
 */
function showLocalStorageData() {
  alert("O valor guardado é: " + localStorage.getItem("arquivo1"));
}

/**
 * Função para limpar os dados salvos no localStorage
 */
function clearLocalStorage() {
  localStorage.removeItem("arquivo1");
}

Browser other questions tagged javascript html localstorage

You are not signed in. Login or sign up in order to post.