Question

A simple script显示调色板。我使用jQuery.ready来初始化它。当我单击某个颜色时，该脚本只会更改所单击框的类，以便在其上显示一个复选框。它还将颜色值放在隐藏的字段中。

现在我点击导航栏转到另一个页面，然后点击后退按钮。隐藏字段中的值仍然存在。但是不再检查颜色框了（萤火虫确认该课不再在这里了）。

我可以做些什么来确保jquery动态设置的类在返回页面时仍然在这里？

（我在最新的FF和IE中试过这个）

Answer 1

您无法依赖浏览器来维护您的网站状态。当您使用后退按钮并且隐藏字段值仍然存在时，会考虑 extra ，您可能无法获得与其他浏览器相同的行为。

这意味着您必须自己保存和维护网站状态。如果您使用ajax来浏览您的网站，您可以使用对象轻松维护状态，但由于情况并非如此，解决方案可能是使用cookie。

编辑：HTML5 Web Storage也可以作为替代解决方案，适用相同的逻辑。

遵循W3Schools的代码，取自http://www.w3schools.com/js/js_cookies.asp

设置Cookie

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

获取Cookie值

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

因此，当用户选择颜色时，您基本上会设置一个Cookie（使用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"); } });

编辑：仅在来自其他网站时保持状态（不仅仅是点击后退按钮）。重新加载可以清除所有内容。

假设用户在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时，如果某个Cookie（如下所述）设置为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 - ＆gt; page2.html - ＆gt; google.com - ＆gt; page1.html

..价值仍将存在。重新加载page1.html可以清除所有内容。不幸的是，我无法为您提供HTML5 Web存储示例，因为我从未使用它，但应用相同的逻辑将为您提供类似的结果。

希望这有帮助。

由jquery设置的css样式在后退按钮后丢失

1 个答案: