我如何獲得一個網頁來記住它的狀態

Question

我想讓網頁記住它的狀態，這樣如果用戶離開或刷新頁面，他們已經到達的點不會丟失。我嘗試了很多不同的方式，但似乎無法讓他們工作。我附上FIDDLE來演示代碼。我只是需要一些重大的幫助，搞清楚如何實現某種類型的內存網頁：/

CODE： HTML：

<form method="post" id="partnumbers" name="partnumbers" action="formHandler"> 
<div id="specialOffer"> 
<ul> 
    <li> 
    <div id="prodD"> 
     <input type="hidden" name="partNum_1" id="catnum1" value="" /> 
     <div id="close" style="display:none;"><a href="#">Remove X</a></div> 
     <div id="Prod1"></div> 
    </div> 
    </li> 
    <li> 
    <div id="prodO"> 
     <input type="hidden" name="partNum_2" id="catnum2" value="" /> 
     <div id="close" style="display:none;"><a href="#">Remove X</a></div> 
     <div id="Prod2"></div> 
    </div> 
    </li> 
    <li> 
    <div id="prodA"> 
     <input type="hidden" name="partNum_3" id="catnum3" value="" /> 
     <div id="close" style="display:none;"><a href="#">Remove X</a></div> 
     <div id="Prod3"></div> 
    </div> 
    </li> 
    <li> 
    <div id="prodSubmit"> 
     <input name="Submit" id="Submit" type="submit" value="Submit" /> 

    </div> 
    </li> 
</ul> 
</div> 

<div id="flyout1"> 
<ul class="paginate-1"> 
    <li><div id="subProd" class="9059863"> 
    <img class="thumb" src="images/placeholder.jpg" width="110" height="110" /> 
    <span class="product"> 
    <p class="title">PRODUCT TITLE</p> 
     <p class="number">PARTnum</p> 
     <p class="price">Price</p> 
    </span> 
    <a href="#" class="button">+ Add item</a> 
     <a href="http://www.google.co.uk" class="qv"><img src="images/qv.png" width="17" height="17" /></a> 
</div></li> 
    <li><div id="subProd" class="9087361"> 
    <img class="thumb" src="images/placeholder.jpg" width="110" height="110" /> 
    <span class="product"> 
    <p class="title">PRODUCT TITLE</p> 
     <p class="number">PARTnum</p> 
     <p class="price">Price</p> 
    </span> 
    <a href="#" class="button">+ Add item</a> 
    <a href="http://www.google.co.uk" class="qv"><img src="images/qv.png" width="17" height="17" /></a> 
</div></li> 
    <li><div id="subProd" class="9087378"> 
    <img class="thumb" src="images/placeholder.jpg" width="110" height="110" /> 
    <span class="product"> 
    <p class="title">PRODUCT TITLE</p> 
     <p class="number">PARTnum</p> 
     <p class="price">Price</p> 
    </span> 
    <a href="#" class="button">+ Add item</a> 
    <a href="http://www.google.co.uk" class="qv"><img src="images/qv.png" width="17" height="17" /></a> 
</div></li> 
    <li><div id="subProd" class="9087354"> 
    <img class="thumb" src="images/placeholder.jpg" width="110" height="110" /> 
    <span class="product"> 
    <p class="title">PRODUCT TITLE</p> 
     <p class="number">PARTnum</p> 
     <p class="price">Price</p> 
    </span> 
    <a href="#" class="button">+ Add item</a> 
     <a href="http://www.google.co.uk" class="qv"><img src="images/qv.png" width="17" height="17" /></a> 
</div></li> 
    <li><div id="subProd" class="9059791"> 
    <img class="thumb" src="images/placeholder.jpg" width="110" height="110" /> 
    <span class="product"> 
    <p class="title">PRODUCT TITLE</p> 
     <p class="number">PARTnum</p> 
     <p class="price">Price</p> 
    </span> 
    <a href="#" class="button">+ Add item</a> 
    <a href="http://www.google.co.uk" class="qv"><img src="images/qv.png" width="17" height="17" /></a> 
</div></li> 
</ul> 
</div> 
</form> 

CSS：

#specialOffer, #flyout1, #flyout2, #flyout3 {margin:0; padding:0; width:990px; overflow:hidden;} 
#specialOffer {padding:10px 0 0 20px;} 
#flyout1 {background:transparent url(../images/popupBG0.png) top left no-repeat;} 

#specialOffer UL, UL.paginate-1, UL.paginate-2, UL.paginate-3 { 
    float:left; 
    margin:0; padding:0; 
    height:260px; 
    display:block; 
} 
#specialOffer UL {width:970px;} 
#specialOffer UL, UL.paginate-3 { 
    height:270px; 
} 
#specialOffer UL LI, UL.paginate-1 LI, UL.paginate-2 LI, UL.paginate-3 LI { 
    float:left; 
    margin:30px 30px 0 27px; padding:0; 
    display:inline; 
    width:130px; 
    height:200px; 
} 
#specialOffer UL LI { 
    height:220px; 
} 

#scrollable { 
    margin-top:10px; 
    float:left; 
    background-color:#eee; 
    width:990px; 
    border-top: 1px; 
    border-top-color: #CCC; 
    border-top-style: solid; 
} 

.pager { 
    margin-right:10px; 
    overflow:hidden; 
    padding:1em 0; 
    float:right; 
} 

.pager li{ 
    float:left; 
    list-style-type:none; 
    margin-right:.3em; 
    font-size:1.1em; 
} 

.pager a{ 
    color:#FF9182; 
    outline:none; 
    text-decoration:underline; 
} 
.pager a:hover{ 
    text-decoration:none; 
} 
.pager .active a { 
color:#666; 
font-weight:bold; 
} 

.pager .disabled { 
width:32px; 
text-indent:-9999px; 
} 

/* Needed for carousel*/ 
.flexiwrap { 
    margin:0 0 0 20px; padding:0; 
    float:left; 
    width:970px; 
    height:271px; 
} 

/* PAGINATED CONTENT */ 
#Prod1, #Prod2, #Prod3, #subProd {float:left; margin:0; padding:0; width:130px;} 
#Prod4 {float:left; margin:0; padding:0; width:130px;} 
#Prod1 img.thumb, #Prod2 img.thumb, 
#Prod3 img.thumb, #subProd img.thumb { 
    margin:0; padding:0 10px; 
    background-color:#fff; 
    border:1px solid #ccc; 
} 

.button, .qv { 
    float:left; 
    background-image: linear-gradient(#ffffff, #eeeeee); 
    border: 1px solid #ccc; 
    border-radius: 3px; 
    color: #666; 
    cursor: pointer; 
    display: inline-block; 
    font-size: 13px; 
    line-height: 17px; 
    padding: 5px 10px; 
    text-decoration:none; 
    overflow: visible; 
} 
.qv { 
    z-index:9999px; 
} 
#Prod1 .qv, #Prod2 .qv, 
#Prod3 .qv, #subProd .qv { 
    float:right; 
    margin:0; 
    padding:0; 
    cursor: pointer; 
    padding:5px 5px 0px 6px; 
} 
#Prod1 .qv IMG, #Prod2 .qv IMG, 
#Prod3 .qv IMG, #subProd .qv IMG { 
    border:0 none; 
    margin:0; padding:0; 
} 

#Prod1 .product P, #Prod2 .product P, 
#Prod3 .product P, #subProd .product P {margin:5px 0; padding:0; line-height:13px;} 
#Prod1 .product .title, #Prod2 .product .title, 
#Prod3 .product .title, #subProd .product .title {color:#666; font-size:13px;} 
#Prod1 .product .number, #Prod2 .product .number, 
#Prod3 .product .number, #subProd .product .number {color:#666; font-size:11px;} 
#Prod1 .product .price, #Prod2 .product .price, 
#Prod3 .product .price, #subProd .product .price { 
    font-size:20px; 
    font-weight:bold; 
    margin-bottom:3px; 
    line-height:20px; 
} 

#close {margin-top:-15px;} 
#close a {float:right; margin:0; padding:0; text-decoration:none;} 

#Prod1, #Prod2, #Prod3 {border:1px solid #ccc; height:110px; cursor:pointer;} 
#prodDoll INPUT, #prodOutfit INPUT, #prodAcc INPUT {display:none;} 
#Prod4 {float:left; margin:0; padding:0; width:130px; height:110px; cursor:pointer;} 
#subProd {cursor: pointer;} 

JS：

$('#flyout1').hide(); 
$('#prodSubmit').hide(); 

$('#flyout1 #subProd').click(function() { 
    var id1 = $(this).attr('class'); 
    $("#catnum1").val(id1); 
    $("#Prod1").html($("." + $(this).attr('class')).html()); 
    $("#Prod1").css("border", "none"); 
    $("#prodD #close").css("display", "block"); 
    $("#prodD .button, #prodD .qv").css("display", "none"); 
    $("#Prod1").attr('rel', 'done'); 
}); 

$("#prodD #close a").click(function() { 
    $("#prodD #close").css("display", "none"); 
    $("#Prod1").empty(); 
    $("#Prod1").css("border", "1px solid #CCC"); 
    $("#Prod1").removeAttr("rel") 
}); 

$("#Prod1").on("click",function(){ 
    $("#flyout1").slideToggle(); 
}); 

$("a.qv").click(function(e) { e.stopPropagation(); }); 
$("a.qv").colorbox(); 

我重新使用了以前的JSFiddle，因爲頁面背後的功能差不多。

Answer 1

Cookie用於維護訪問之間的網頁狀態。有關如何使用它們，請參閱http://www.w3schools.com/js/js_cookies.asp。

我不清楚你的意思是「他們已經達到的程度」。我可以建議如果你澄清你的話，你應該如何使用cookies。