显示本地存储中的用户收藏夹
Displaying user Favourites from Local Storage
所以我今天早上撞到了一堵砖墙上。简而言之，我创建了一个网页，该网页从JSON文件中读取属性，并允许用户使用类型/价格/卧室过滤搜索。我试图列出一个最喜欢的清单，但这就是问题出现的地方。我可以将属性 ID 保存到本地存储中，但是我无法查看该 ID 或使用它来显示链接到该 ID 的属性。
这是我的HTML代码：
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="staffscript.js"></script>
<body>
<p id="prop1">
This is prop 1 page
<button class="save">Save to Favourites</button>
</p>
<button id="viewFavourites">View Favourites</button>
<div id="placeholder"></div>
<label for="House">House</label>
<input type="radio" id="House" name="type" value="House"/>
<label for="Flat">Flat</label>
<input type="radio" id="Flat" name="type" value="Flat"/>
<label for="Any">Any</label>
<input type="radio" id="Any" name="type" value="Any"/>
<select id="minPrice" name="minPrice">
<option value="0">No Min Price</option>
<option value="100000">£100,000</option>
<option value="150000">£150,000</option>
<option value="200000">£200,000</option>
<option value="250000">£250,000</option>
</select>
<select id="maxPrice" name="maxPrice">
<option value="99999999999999">No Max Price</option>
<option value="100000">£100,000</option>
<option value="150000">£150,000</option>
<option value="200000">£200,000</option>
<option value="2500000">£250,000</option>
</select>
<select id="minBedrooms" name="minBedrooms">
<option value="0">No Min Bedrooms</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<select id="maxBedrooms" name="maxBedrooms">
<option value="10">No Max Bedrooms</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<select id="TimeAddedMonth" name="TimeAddedMonth">
<option value="Any">Any</option>
<option value="January">January</option>
<option value="February">February</option>
<option value="March">March</option>
<option value="April">April</option>
<option value="May">May</option>
<option value="June">June</option>
<option value="July">July</option>
<option value="August">August</option>
<option value="September">September</option>
<option value="October">October</option>
<option value="November">November</option>
<option value="December">December</option>
</select>
<select id="TimeAddedDay" name="TimeAddedDay">
<option value="Any">Any</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
</select>
<button id="search">Search Staff</button>
</body>
这是我的JS文件
$(document).ready(function() {
$("#search").on("click", function(){
$.getJSON('data.json', function(data) {
var Type = $("input:checked").val();
var minPrice = $("#minPrice").val();
var maxPrice = $("#maxPrice").val();
var minBedrooms = $("#minBedrooms").val();
var maxBedrooms = $("#maxBedrooms").val();
var timeAdded = $("#TimeAddedMonth").val();
var timeAddedDay = $("#TimeAddedDay").val();
var output = "<ul>";
for(var i in data.Properties) {
if ((Type == data.Properties[i].type) || ( Type == "Any" )){
if ((data.Properties[i].price >= minPrice) && (data.Properties[i].price <= maxPrice)){
if ((data.Properties[i].bedrooms >= minBedrooms) && (data.Properties[i].bedrooms <= maxBedrooms)){
if ((timeAdded == data.Properties[i].added.month) || ( timeAdded == "Any" )){
if ((timeAddedDay == data.Properties[i].added.day) || ( timeAddedDay == "Any" )){
output+="<li>" + data.Properties[i].type + "</li>";
output+='<img src="' + data.Properties[i].picture + '" />';
output+="<li>" + "£" + data.Properties[i].price + "</li>";
output+="<li>" + data.Properties[i].description + "</li>";
output+='<a href="' + data.Properties[i].url + '" > Full Description... </a>';
document.getElementById("placeholder").innerHTML = output;
}
}
}
}
}
}
output+="</ul>";
});
});
$(".save").on( "click", function() {
try {
$(this).attr('disabled',true);
//restoreArrayData();
var AddingHouses = $(this).closest("p").attr("id");
var myFavouriteProperties = JSON.parse(localStorage.getItem("favProperties"));
if (myFavouriteProperties == null) {
myFavouriteProperties = [];
}
myFavouriteProperties.push(AddingHouses);
localStorage.setItem("favProperties",JSON.stringify(myFavouriteProperties));
}
catch (e) {
if (e == QUOTA_EXCEEDED_ERR) {
console.log("Error: Local Storage limit Exceeded");
}
else {
console.log("Error: Saving to Local Storage");
}
}
});
});
$("#viewFavourites").on("click", function() {
console.log("Restoring array data from local storage");
myFavouriteProperties = JSON.parse(localStorage.getItem("favProperties"));
var output = "<ul>";
if(myFavouriteProperties != null) {
for (var i = 0; i < data.Properties.length; i++) {
for (j = 0; j < myFavouriteProperties.length; j++) {
if(data.Properties[i].id == myFavouriteProperties[j])
{
output+="<li>" + data.Properties[i].type + "</li>";
output+='<img src="' + data.Properties[i].picture + '" />';
output+="<li>" + "£" + data.Properties[i].price + "</li>";
}
}
}
}
output+="</ul>";
document.getElementById("placeholder").innerHTML = output;
});
除了"查看收藏夹"功能之外，一切都有效
注意：我可以看到我的 FireFox 本地存储，因此它确实将 ID 保存在数组中。我不明白为什么它不显示它
您可以使用全局变量访问 localStorage 对象localStorage
就个人而言，我在使用它时会使用此片段：
// Retrieve your data from locaStorage
var saveData = JSON.parse(localStorage.saveData || null) || {};
// Store your data.
function saveStuff(obj) {
saveData.obj = obj;
// saveData.foo = foo;
saveData.time = new Date().getTime();
localStorage.saveData = JSON.stringify(saveData);
}
// Do something with your data.
function loadStuff() {
return saveData.obj || "default";
}
if (saveData.time) alert("You were here: " + saveData.time);
saveStuff("Stuff");
@dsfq的评论是正确的。 data未在#viewFavourites单击函数中定义。for 循环永远不会运行，因为没有要跳过的项。
将data分配给父作用域($(document).ready()等(中的变量，以便在其他函数中访问它。
相关文章：
- 使用HTML5 localStorage和jQuery添加到收藏夹/书签
- 如何从网站获得apple touch图标，如果没有;不存在，则显示收藏夹
- 添加到Safari中的收藏夹/书签栏(CMD+D）
- 角度添加到收藏夹
- 单击复选框时将此元素添加到收藏夹数组 + 后 Ajax 元素关系
- HTML - 添加和删除收藏夹
- 显示本地存储中的用户收藏夹
- 如何创建一个“;收藏夹栏”;通过将表格元素拖动到下拉菜单中
- 如何在javascript中添加到所有浏览器的收藏夹/书签
- 为什么收藏夹不可见
- 使用JQuery添加收藏夹/保存按钮
- 持久收藏夹列表
- 使用ng类创建收藏夹图标
- 如何自动创建由许多收藏夹URL组成的精灵
- 带有收藏夹选项的多图像页面-如何使用localStorage来记住哪些图像受到了青睐
- 如何在单击时以编程方式将网页列表添加到浏览器收藏夹中
- 向收藏夹添加一个插入javascript的按钮
- 添加到收藏夹，jquery
- 添加到收藏夹数组
- 带有XMLHttpRequest的收藏夹按钮
