Question

所以我今天早上跑进了一堵砖墙。简而言之，我创建了一个从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保存在数组中。我不明白为什么它不显示它

Answer 1

您只需使用全局变量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");

Answer 2

@ dsfq的评论是正确的。 data点击功能未定义#viewFavourites。 for循环永远不会运行，因为没有项目可以覆盖。

将data分配给父作用域（$(document).ready()等）中的变量，以便在其他函数中访问它。

从本地存储显示用户收藏夹

2 个答案: