2

我有一个带有几个复选框的页面。我检查了其中一些并转到下一页，当我回到此页面时，这些复选框需要保持选中状态，然后才能导航到另一个页面。需要用Javascript来做。有什么线索吗？？

4

3 回答 3

4

如果您仅限于 JavaScript 而没有服务器端语言，我认为您只能读/写 cookie 来维护状态。正如其他人所引用的，服务器端技术在这方面要好得多，但如果你必须：

JavaScript cookie 示例代码（参考：http ://www.quirksmode.org/js/cookies.html ）：

function createCookie(name,value,days) {
    if (days) {
        var date = new Date();
        date.setTime(date.getTime()+(days*24*60*60*1000));
        var expires = "; expires="+date.toGMTString();
    }
    else var expires = "";
    document.cookie = name+"="+value+expires+"; path=/";
}

function readCookie(name) {
    var nameEQ = name + "=";
    var ca = document.cookie.split(';');
    for(var i=0;i < ca.length;i++) {
        var c = ca[i];
        while (c.charAt(0)==' ') c = c.substring(1,c.length);
        if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
    }
    return null;
}

function eraseCookie(name) {
    createCookie(name,"",-1);
}
于 2009-07-20T15:37:18.433 回答
1

您需要在页面请求之间保留它们。您可以使用会话或 cookie 来执行此操作。您正在使用什么类型的服务器，以及使用什么类型的服务器端语言？

以前关于 SO 的问题已经解决了从 JavaScript 写入/读取 cookie 的问题。

于 2009-07-20T15:30:19.010 回答
1

我认为没有任何合理复杂的方法可以在不访问服务器端代码的情况下执行此操作，因为至少您需要安装代码并识别 HTML 控件，例如以便检查它们。我正在给出合理的代码，可以在下面执行您想要的操作。

重要笔记：

  1. 该代码要求为每个复选框赋予一个不同的 id 属性。
  2. 检查状态存储在名为“JS_PERSISTENCE_COOKIE”的 cookie 中。最好将此 cookie 的名称存储在一个变量中，而不是像我所做的那样在几个单独的地方硬编码它。什么样的变量应该存储名称取决于您的应用程序和要求。
  3. 最好将代码打包在一个对象中，而不是像我所做的那样作为一堆自由函数。但是，这与您最初的问题无关。
  4. 单击某些复选框后，您可以通过按 CTRL+F5 来模拟“导航回此页面”。仅 F5 是不够的。

这是用于测试的代码和一些示例 HTML：

<body onload="restorePersistedCheckBoxes()">
    <input type="checkbox" id="check1" onclick="persistCheckBox(this)" />
    <input type="checkbox" id="check2" onclick="persistCheckBox(this)" />
    <input type="checkbox" id="check3" onclick="persistCheckBox(this)" />
    <input type="button" value="Check cookie" 
           onclick="alert(document.cookie)" />
    <input type="button" value="Clear cookie"
           onclick="clearPersistenceCookie()" />

    <script type="text/javascript">
        // This function reads the cookie and checks/unchecks all elements
        // that have been stored inside. It will NOT mess with checkboxes 
        // whose state has not yet been recorded at all.
        function restorePersistedCheckBoxes() {
            var aStatus = getPersistedCheckStatus();
            for(var i = 0; i < aStatus.length; i++) {
                var aPair = aStatus[i].split(':');
                var el = document.getElementById(aPair[0]);
                if(el) {
                    el.checked = aPair[1] == '1';
                }
            }
        }

        // This function takes as input an input type="checkbox" element and
        // stores its check state in the persistence cookie. It is smart
        // enough to add or replace the state as appropriate, and not affect
        // the stored state of other checkboxes.    
        function persistCheckBox(el) {
            var found = false;
            var currentStateFragment = el.id + ':' + (el.checked ? '1' : '0');
            var aStatus = getPersistedCheckStatus();
            for(var i = 0; i < aStatus.length; i++) {
                var aPair = aStatus[i].split(':');
                if(aPair[0] == el.id) {
                    // State for this checkbox was already present; replace it
                    aStatus[i] = currentStateFragment;
                    found = true;
                    break;
                }
            }
            if(!found) {
                // State for this checkbox wasn't present; add it
                aStatus.push(currentStateFragment);
            }
            // Now that the array has our info stored, persist it
            setPersistedCheckStatus(aStatus);
        }

        // This function simply returns the checkbox persistence status as
        // an array of strings. "Hides" the fact that the data is stored
        // in a cookie.
        function getPersistedCheckStatus() {
            var stored = getPersistenceCookie();
            return stored.split(',');
        }

        // This function stores an array of strings that represents the 
        // checkbox persistence status. "Hides" the fact that the data is stored
        // in a cookie.
        function setPersistedCheckStatus(aStatus) {
            setPersistenceCookie(aStatus.join(','));
        }

        // Retrieve the value of the persistence cookie.
        function getPersistenceCookie()
        {
          // cookies are separated by semicolons
          var aCookie = document.cookie.split('; ');
          for (var i=0; i < aCookie.length; i++)
          {
            // a name/value pair (a crumb) is separated by an equal sign
            var aCrumb = aCookie[i].split('=');
            if ('JS_PERSISTENCE_COOKIE' == aCrumb[0]) 
              return unescape(aCrumb[1]);
          }
          return ''; // cookie does not exist
        }

        // Sets the value of the persistence cookie.
        // Does not affect other cookies that may be present.
        function setPersistenceCookie(sValue) {
            document.cookie = 'JS_PERSISTENCE_COOKIE=' + escape(sValue);
        }

        // Removes the persistence cookie.
        function clearPersistenceCookie() {
            document.cookie = 'JS_PERSISTENCE_COOKIE=' +
                              ';expires=Fri, 31 Dec 1999 23:59:59 GMT;';
        }
    </script>

</body>
于 2009-07-20T16:26:05.980 回答