-1
그래서 오늘 아침에 벽돌 벽으로 뛰어 들었습니다. 요컨대 JSON 파일에서 Properties를 읽는 웹 페이지를 만들었으며 사용자가 Type/Price/Bedrooms를 사용하여 검색을 필터링 할 수 있도록했습니다. 내가 좋아하는 목록을 만들려고했는데, 이것이 문제가 나타난 곳입니다. 속성 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>
그리고 이것은 즐겨 찾기 기능
$(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;
});
모든보기에서 떨어져 작동 나의 JS 파일입니다
참고 : 내 파이어 폭스 로컬 저장소를 볼 수 있습니다 따라서 ID를 배열에 저장합니다.
// 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");
대신 쿠키를 사용하여 저장할 수 있습니까? –
화면을 볼 때 '데이터'가 없습니다. – dfsq
데이터가 없다는 것은 무엇을 의미합니까? 내 로컬 저장소에 들어가면 거기에 많은 prop1 ID가 저장되어 있습니다. –