Question

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

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

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

我正在努力将最喜欢的城市结果保存在LocalStorage中并进行循环并在显示中显示...比如make a array =“”;（对于卡片）并使用所选的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

这是代码，但不是我的试验。我制作了如此多的代码让我感到困惑，所以最好不要在这里显示＆gt;＆gt;

感谢所有可能的帮助和解释

Answer 1

在显示数据的成功功能中，您可以添加

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

假设data.name是城市，如果它不是用城市的任何东西替换它。

然后要检索它，你可以使用getItem，就像这样

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

将该选择器替换为您想要显示城市名称的位置。您可以在“应用程序”选项卡下的Chrome开发工具中查看存储在本地存储中的值。

我在这里编辑了你的笔以显示它的工作情况，搜索后有一个填充来自本地存储的范围https://codepen.io/calder12/pen/Gdarzj

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

JS

HTML

1 个答案: