如何通过选择收藏按钮将数据保存在 LocalStorage 中并显示？

Question

我正在使用天气 API 进行天气搜索项目。

用户应添加城市并返回天气描述，如果选中框（收藏），则城市数据应保存在 LocalStorage 中并显示在卡片（网格）中页面。

该页面有 6 张卡片，其中 1º 显示搜索结果，其他卡片仅显示收藏夹。 我阅读了很多关于写入和删除代码的内容和视频，但仍然卡住了。

我正在努力将最喜欢的城市结果保存在 LocalStorage 中并执行循环并在显示器中显示...比如制作一个数组 =“”；（对于卡片）并将数组与所选的 var 收藏一起存储？这是我许多逻辑的一部分

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填充的跨度