Как сохранить данные в LocalStorage, выбрав кнопку «Избранное», а также отобразить ее?

Question

Я выполняю проект по поиску погоды с использованием API погоды.

Пользователь должен добавить город и получить описание погоды, и если флажок установлен (избранное), данные о городе должны быть сохранены в LocalStorage и отображаться в карточках (сетке) на странице.

На странице есть 6 карточек, где 1º отображает результат поиска, а остальные просто отображают избранное.Я прочитал много вещей + видео о написанных и удаленных кодах и все еще застрял.

Я изо всех сил пытаюсь сохранить результат любимого города в LocalStorage и сделать цикл и показать на дисплее ... как сделать массив= ""; (для карточек) и сохранить массив с выбранным var fav?это часть моей логики

JS

$(document).ready(function(){

$('#getWeather').click(function(){ //addding event
    var city = $("#city").val(); //store City into a var

    if(city != ' '){
        //Get the data and retrieve with ajax
        $.ajax({ 
            url: 'http://api.openweathermap.org/data/2.5/weather?q=' + city + '&units=metric' + '&appid=dc57bbc9d1642428d47d8c866bbacd87',
            type:"GET",
            datatype: "jsonp",
            success: function(data){
                var result = display(data);

                $("#show").html(result); //display result into card
                $("#city").val(''); //clean card
            }
        });
    }else{
        $("#error").text('Please add an city');


      }
    });

});

function display(data){
    return  "<h2>" + data.name + "</h2>" +
            "<h3>" + data.main.temp + "<h3>" +
            "<span>" + data.weather[0].main + "<span>";

}

HTML

<!-- nav search box -->
<nav class="navbar navbar-default">
    <form class="navbar-form navbar">
        <div class="form-group">
            <input id="city" name="city" type="text" class="form-control" placeholder="City Name" >
        </div>
            <button id="getWeather" type="button" class="btn btn-primary" href="#">Search City</button>
        <div id="error" class="alert alert-warning" role="alert"></div>
    </form>
</nav>

<!-- card box (Results of researchs)-->
<div class="container-fluid padding">
    <div class="row padding">
        <div class="col-md-4">
            <div class="card">
                <div class="card-body">
                    <div type="button" class="btn btn-default btn-md" aria-pressed="false" autocomplete="off">
                        <input type="checkbox" class="fav-city-cb" value=" ">
                    </div> 
                        <div id="show" stytle="text-align: center"></div>
                        <div><button type="button" class="btn btn-primary" > I am a button</button></div>
                </div>
            </div>
        </div>

        <!-- Cards wich will store favorites -->
        <div class="col-sm-6 col-md-4">
            <div class="card">
                <div class="card-body">
                    <div  type="button" class="btn btn-default btn-md" data-toggle="button" aria-pressed="false" autocomplete="off">
                        <input type="checkbox" class="fav-city-cb" value=" ">
                    </div> 
                    <div  stytle="text-align: center"><h2>Card2 Favorite goes here<h2></div>
                </div>
            </div>
        </div>
        <div class="col-sm-6 col-md-4">
            <div class="card">
                <div class="card-body">
                    <div  type="button" class="btn btn-default btn-md" data-toggle="button" aria-pressed="false" autocomplete="off">
                        <input type="checkbox" class="fav-city-cb" value=" ">
                    </div> 
                    <div  stytle="text-align: center"><h2>Card3 and here<h2></div>
                </div>
            </div>
        </div>
    </div>
</div>

<hr>

<div class="container-fluid padding">
        <div class="row padding">
            <div class="col-md-4">
                <div class="card">
                    <div class="card-body">
                        <div  type="button" class="btn btn-default btn-md" data-toggle="button" aria-pressed="false" autocomplete="off">
                            <input type="checkbox" class="fav-city-cb" value=" ">
                        </div> 
                        <div  stytle="text-align: center"><h2>Card1 and here<h2></div>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card">
                    <div class="card-body">
                        <div  type="button" class="btn btn-default btn-md" data-toggle="button" aria-pressed="false" autocomplete="off">
                            <input type="checkbox" class="fav-city-cb" value=" ">
                        </div> 
                        <div  stytle="text-align: center"><h2>Card2 and here<h2></div>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card">
                    <div class="card-body">
                    <div class="card-body" >
                        <div  type="button" class="btn btn-default btn-md" data-toggle="button" aria-pressed="false" autocomplete="off">
                            <input type="checkbox" class="fav-city-cb" value=" ">
                        </div> 
                        <div  stytle="text-align: center"><h2>Card3 also here<h2></div>
                    </div>
                </div>
            </div>
        </div>
</div>

---

https://codepen.io/gtsasil/pen/aGxZxo

Это код, но не мои испытания.Я сделал так много кода, что запутался, так что лучше не показывать здесь >>

Спасибо за всевозможную помощь и объяснения

Answer 1

В вашей функции успеха, где вы отображаете данные, вы можете добавить

localStorage.setItem('favouriteCity', data.name)

Если предполагается, что data.name - это город, если он не заменяется каким-либо другим городом.

Затем, чтобы получить его, вы можете просто использовать getItem, например,

$('#city-header').html( localStorage.getItem('favouriteCity') )

Замените этот селектор на то, где вы хотите, чтобы отображалось название города.Вы можете проверить значения, хранящиеся в локальном хранилище, для страницы в инструментах разработчика Chrome на вкладке «Приложение».

Я отредактировал здесь ваше перо, чтобы показать, как оно работает, после того, как вы выполните поиск, появится промежуток, который заполняет локальное хранилище https://codepen.io/calder12/pen/Gdarzj