Как установить любимый пользовательский поисковый ввод?JS

Question

Я работаю над своим веб-приложением о погоде.Когда пользователь вводит свой город в строке поиска, приложение показывает прогноз на 5 дней.Нужно установить кнопку, чтобы сохранить город в хранилище браузера или cookie.Когда пользователь обновляет интернет, происходит автоматическая загрузка его любимого города.

Это мой html:

<div id="search">
    <input type="text" id="serach-city-input">
    <a id="search-city-button" class="btn btn-danger">Search</a>
</div>

и JS для соединения с API:

$('#search-city-button').on('click', () => {
    const searchString = $('#serach-city-input').val();
    weatherPage.render(searchString);
    weatherPage.renderThreeHours(searchString);
});

Answer 1

$('#search-city-button').on('click', () => {
    const searchString = $('#serach-city-input').val();
    localStorage.setItem('serach-city-input', searchString);
    weatherPage.render(searchString);
    weatherPage.renderThreeHours(searchString);
});

function fillValueFromStorege() {
  const storagedValue = localStorage.getItem('serach-city-input');
  if (storagedValue) {
    $('#serach-city-input').val(storagedValue);
    $('#search-city-button').click()
  }
}

fillValueFromStorege()

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="search">
    <input type="text" id="serach-city-input">
    <a id="search-city-button" class="btn btn-danger">Search</a>
</div>

Answer 2

Вы должны использовать localStorage.setItem('favoriteCity', searchString), чтобы сохранить значение пользователя при нажатии кнопки «Сохранить».
Затем при загрузке страницы используйте localStorage.getItem('favoriteCity'), чтобы получить сохраненное значение. У вас должен быть метод Init () или что-то, что использует ваш render(localStorage.getItem('favoriteCity'))