стили css, установленные jquery lost after back button

Question

A simple script отображает цветовую палитру. Я использую jQuery.ready, чтобы инициализировать его. Когда я нажимаю на цвет, сценарий просто изменяет класс щелчка, чтобы на нем появился флажок. Он также помещает значение цвета в скрытое поле.

Теперь я нажимаю на навигационную панель, чтобы перейти на другую страницу, затем нажмите кнопку «Назад». Значение в скрытом поле все еще здесь. Но цветная коробка больше не проверяется (firebug подтвердил, что класс больше здесь).

Что можно сделать, чтобы динамический набор jquery по-прежнему был здесь, когда возвращался на страницу?

(я попробовал это в последней FF и IE)

Answer 1

Вы не можете полагаться на браузер для поддержания вашего сайта состояния. Когда вы используете кнопку «Назад», а значение скрытого поля все еще существует, обратите внимание, что дополнительно, возможно, вы не получите такого же поведения с другими браузерами.

Это означает, что вам необходимо сохранить и поддерживать сайт самостоятельно. Если вы использовали ajax для навигации по своему сайту, вы могли бы легко поддерживать состояние с помощью объекта, но, поскольку это не так, решение может заключаться в использовании файлов cookie.

EDIT: HTML5 Web Storage также может быть альтернативным решением, применяется такая же логика.

После кода по W3Schools, взяты из http://www.w3schools.com/js/js_cookies.asp

Чтобы установить куки

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; 
} 

Чтобы получить значение куки

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); 
     } 
    } 
} 

Так вы в основном набор печенья когда пользователь выбирает цвет (используя setCookie()), и каждый раз, когда страница загружается, вы проверяете значение cookie (используя getCookie()) и заполняете страницу соответствующим образом.

Пример

//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: Чтобы сохранить только состояние, когда приходит с другого сайта (не только нажатие кнопки назад). Перезагрузка очищает все.

Предположим, пользователь установил цвет в page1.html, затем перейдет на page2.html, а затем возвращается к page1.html.

В page1.html сохраните выбранное значение цвета в файле cookie, как и раньше.

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

Но теперь, когда page1.html нагрузки, только заполнить страницу с возможным ранее выбранным значением, если определенное печенье (описано ниже) установлено в true.

//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); 
    } 
}); 

Теперь в page2.html сделать это:

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

Что это делает, что позволяет знать, если посетитель приходит с другой страницы, когда они достигают page1.html. Имейте в виду, что если пользователь делает это ...

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

.. значения все равно будет там , Перезагрузка page1.html очищает все. К сожалению, я не смогу предоставить вам примеры HTML5 Web Storage, поскольку я никогда не использовал его, но применение той же логики даст вам аналогичные результаты.

Надеюсь, это поможет.