css styles von jquery gesetzt verloren nach back button

Question

A simple script zeigt eine Farbpalette. Ich verwende jQuery.ready, um es zu initiieren. Wenn ich auf eine Farbe klicke, ändert das Skript nur die Klasse der angeklickten Box, so dass ein Ankreuzfeld darauf erscheint. Es setzt den Farbwert auch in ein verstecktes Feld.

Jetzt klicke ich in die Navigationsleiste, um zu einer anderen Seite zu gelangen, dann drücke die Zurück-Taste. Der Wert im versteckten Feld ist immer noch hier. Aber die Farbbox wird nicht mehr überprüft (Firebug hat bestätigt, dass die Klasse nicht mehr da ist).

Was kann ich tun, um sicherzustellen, dass die von jquery dynamisch festgelegte Klasse immer noch vorhanden ist, wenn Sie auf die Seite zurückkehren?

(Ich habe versucht, dies in neueste FF und IE)

Answer 1

Sie können nicht auf den Browser verlassen Ihre Website Zustand zu halten. Wenn Sie die Zurück-Taste verwenden und der Wert des ausgeblendeten Felds immer noch in Betracht gezogen wird, dass ein extra, Sie möglicherweise nicht das gleiche Verhalten mit anderen Browsern erhalten.

Das bedeutet, dass Sie den Status der Website selbst speichern und pflegen müssen. Wenn Sie Ajax verwenden, um auf Ihrer Website zu navigieren, können Sie den Status leicht mit einem Objekt verwalten, aber da dies nicht der Fall ist, könnte eine Lösung die Verwendung von Cookies sein.

EDIT: HTML5 Web Storage kann auch eine alternative Lösung sein, die gleiche Logik gilt.

folgenden Code von W3Schools, genommen von http://www.w3schools.com/js/js_cookies.asp

ein Cookie zu setzen

function setCookie(c_name,value,exdays) 
{ 
    var exdate=new Date(); 
    exdate.setDate(exdate.getDate() + exdays); 
    var c_value=escape(value) + ((exdays==null) ? "" : "; expires="+exdate.toUTCString()); 
    document.cookie=c_name + "=" + c_value; 
} 

Um Cookie-Wert

function getCookie(c_name) 
{ 
    var i,x,y,ARRcookies=document.cookie.split(";"); 
    for (i=0;i<ARRcookies.length;i++) 
    { 
     x=ARRcookies[i].substr(0,ARRcookies[i].indexOf("=")); 
     y=ARRcookies[i].substr(ARRcookies[i].indexOf("=")+1); 
     x=x.replace(/^\s+|\s+$/g,""); 
     if (x==c_name) 
     { 
      return unescape(y); 
     } 
    } 
} 

Also würde man im Grunde wird ein Cookie gesetzt zu bekommen wenn der Benutzer eine Farbe auswählt (setCookie()), Jedes Mal, wenn die Seite geladen wird, überprüfen Sie den Cookie-Wert (getCookie()) und füllen Sie die Seite entsprechend auf.

Beispiel

//User has chosen a color, save that in a cookie for 1 day 
setCookie("selectedColor", "green", 1); 

//Page is loaded, check for cookie value... 
$(document).ready(function() 
{ 
    //Get cookie value 
    var selectedColor = getCookie("selectedColor"); 
    if(selectedColor != "") 
    { 
     //A color has been previously selected, add the CSS class accordingly 
     $("#"+selectedColor).addClass("selected"); 
    } 
}); 

EDIT: nur den Zustand zu halten, wenn sie von einer anderen Seite kommen (nicht nur einfach die Zurück-Taste schlagen). Nachladen löscht alles.

Nehmen wir an, der Benutzer die Farbe in page1.html setzt, geht dann auf page2.html und dann zu page1.html kommt zurück.

In page1.html speichern Sie den ausgewählten Farbwert in einem Cookie, der gleiche wie zuvor.

//User has chosen a color, save that in a cookie for 1 day 
setCookie("selectedColor", "green", 1); 

Aber jetzt, wenn page1.html Lasten, bevölkern nur die Seite mit einem möglichen vorher ausgewählten Wert, wenn ein bestimmtes Cookie (siehe unten) zu true gesetzt.

//page1 is loaded 
$(document).ready(function() 
{ 
    //Only populate page if "populate" cookie is set to true 
    if(getCookie("populate") != "true") 
    { return; //Stop } 

    //Get cookie value 
    var selectedColor = getCookie("selectedColor"); 
    if(selectedColor != "") 
    { 
     //A color has been previously selected, add the CSS class accordingly 
     $("#"+selectedColor).addClass("selected"); 

     //Set "populate" cookie to false 
     setCookie("populate", "false", 1); 
    } 
}); 

, jetzt in page2.html dies tun:

//page2 is loaded 
$(document).ready(function() 
{ 
    //Set "populate" cookie to true 
    setCookie("populate", "true", 1); 
} 

Was dies bedeutet ist, so dass Sie die Besucher wissen, ob von einer anderen Seite kommen, wenn sie page1.html erreichen. Beachten Sie, dass, wenn der Benutzer tut dies ...

page1.html -> page2.html -> google.com -> page1.html

.. die Werte immer noch da sein wird, . Nachladen page1.html löscht alles. Leider kann ich Ihnen HTML5-Webspeicher-Beispiele nicht zur Verfügung stellen, da ich sie nie benutzt habe, aber die Anwendung der gleichen Logik führt zu ähnlichen Ergebnissen.

Hoffe, das hilft.