Как обновить значение ввода при перезагрузке страницы с помощью localstorage? - PullRequest
Новая
       12

Как обновить значение ввода при перезагрузке страницы с помощью localstorage?

0 голосов
/ 05 января 2019

Когда пользователь вводит текст в элемент ввода, я хочу иметь возможность сохранить то, что он печатает, так что если он обновит его, он все еще будет кэшироваться. 

const input = document.getElementById('input')
input.onchange = function(){
  const key = input.value;
  localStorage.setItem('key', key)
  input.value = localStorage.getItem("key");
};

Ответы [ 5 ]

0 голосов
/ 05 января 2019

Сначала сохраните значение в localalstorage при каждом изменении. Затем, когда страница перезагрузится, используйте localStorage.getItem(). 

var input = document.getElementById("myinput") // Get my input

function restore(){
  var lst = localStorage.getItem("inputdata") // Get your data from local storage
  
  if(lst === null || lst === undefined){
    return; // return if the user has not visited this site/input
  }
  
  input.value = lst; // Sets the value of the input to the restore data
  
  return;
}

restore()

function save(event_data){
  localStorage.setItem("inputdata",input.value) // Save the value in localStorage
}

input.addEventListener("change",save);
Input Something Here <input id="myinput">

Это работает, но я рекомендую использовать cookieStorage для этого.

0 голосов
/ 05 января 2019

В верхней части своей страницы добавьте следующую инструкцию window.onload: 

window.onload = function() {
    var data = localStorage.getItem(“key”);
    if (data) {
        document.getElementById(“input”).value = data;
    }
};
// Rest of your code here
0 голосов
/ 05 января 2019 
<body onload="reloadData()">
 <!-- your html here -->
</body>
<script>
    const input = document.getElementById('input')
    input.onchange = function(){
        const value = input.value;
        localStorage.setItem('key', value);
    };
    function reloadData() {
        input.value = localStorage.getItem('key') || ''
    }
</script>

Функция reloadData будет вызываться при загрузке страницы. Это будет работать, как вы хотите.

0 голосов
/ 05 января 2019

Просто присвойте значение элементу ввода вне функции обработчика события: 

const input = document.getElementById('input')
input.value = localStorage.getItem("key"); // get and assign the value outside 
input.onchange = function(){
  const key = input.value;
  localStorage.setItem('key', key);
};

Обратите внимание: Вы также можете рассмотреть возможность использования oninput вместо onchange .

0 голосов
/ 05 января 2019

Вероятно, кому-то это нравится, просто добавьте прослушиватель события загрузки, который устанавливает входное значение из localStorage или значение по умолчанию, если в localStorage еще ничего нет? 

const input = document.getElementById('input')
input.onchange = function(){
    const value = input.value;
    localStorage.setItem('key', value);
};

document.addEventListener('load', ()=> {
    input.value = localStorage.getItem('key') || '';
})
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...