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

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

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

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

我正在努力将最喜欢的城市结果保存在LocalStorage中，并在显示中执行循环和显示。。。像做一个数组=“”；（对于卡片）并使用选定的var收藏夹存储阵列？这是我许多逻辑的一部分

JS

$（文档）.ready（函数（）{
$（'#getWeather'）。单击（函数（）{//添加事件
var city=$（“#city”）.val（）；//将城市存储到变量
如果（城市！=''）{
//获取数据并使用ajax检索
$.ajax（{
网址：'http://api.openweathermap.org/data/2.5/weather?q=“+城市+”&单位=公制“+”&应用ID=dc57bbc9d1642428d47d8c866bbacd87'，
键入：“获取”，
数据类型：“jsonp”，
成功：功能（数据）{
var结果=显示（数据）；
$（“#show”）.html（result）；//将结果显示到卡中
$（“#城市”）.val（“”）；//清洁卡
}
});
}否则{
$（“#错误”）.text（'请添加一个城市'）；
}
});
});
功能显示（数据）{
返回“”+data.name+“”+
“”+data.main.temp+“”+
“+data.weather[0].main+”；
}

HTML

搜索城市
我是一颗纽扣
Card2最爱在这里
卡片3和这里

卡1和这里
卡2和这里
也在这里

---

这是代码，但不是我的测试。我编写了太多的代码，弄糊涂了，所以最好不要在这里显示>>

---

感谢您在success功能中提供的所有可能的帮助和解释，您可以在该功能中显示您可以添加的数据

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

这是假设data.name是城市，如果它不是，则将其替换为城市

然后，要检索它，可以使用getItem，如下所示

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

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

---

我在这里编辑了你的笔以显示它的工作状态，在你搜索之后，有一个从本地存储填充的范围

嘿，伙计，谢谢。。但我应该只在选中复选框时保存，而不是在执行搜索时保存。因此，我不保存城市，而是保存数据，在本例中为显示（数据）。然后我需要做一个循环，将新的fav显示到Cards2或cards3等中$（“#复选框”）。单击（function（）{var fav=$（“#show”）.val（）；localStorage.setItem（“favorite”，test）；}）；这将是一段相当复杂的代码。您需要将数据作为数组发送到本地存储器，然后在页面加载时检查该数组以查看其中是否有任何内容，然后根据该数据添加卡。稍后我可能会模拟一个工作示例，但老实说，为了将来的参考，很多代码都超出了标准。只是为了让你知道，并且可以避免在将来被抱怨！谢谢Rick，我找到了另一个可行的选择，我注意到对于像我这样的入门级人员来说，这将是很多代码。谢谢你的回答！！！很高兴听到你找到了解决办法！我真的很忙，所以结果很好。

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

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