Warning: file_get_contents(/data/phpspider/zhask/data//catemap/2/apache-kafka/3.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 复选框值的持久性_Javascript_Checkbox_Persistence_Back - Fatal编程技术网

Javascript 复选框值的持久性

Javascript 复选框值的持久性,javascript,checkbox,persistence,back,Javascript,Checkbox,Persistence,Back,我有一个带有几个复选框的页面。我选中了其中的一些复选框并转到下一页,当我回到这一页时,这些复选框需要保持选中状态,就像导航到另一页之前一样。需要使用Javascript来完成。任何线索???您需要在页面请求之间保留它们。您可以使用会话或cookie来完成此操作。您使用的是哪种类型的服务器,以及哪种类型的服务器端语言 前面关于SO的问题涉及从JavaScript编写/读取cookie 如果您仅限于JavaScript,而没有服务器端语言,我认为您只能通过读/写cookie来维护状态。正如其他

我有一个带有几个复选框的页面。我选中了其中的一些复选框并转到下一页,当我回到这一页时,这些复选框需要保持选中状态,就像导航到另一页之前一样。需要使用Javascript来完成。任何线索???

您需要在页面请求之间保留它们。您可以使用会话或cookie来完成此操作。您使用的是哪种类型的服务器,以及哪种类型的服务器端语言

前面关于SO的问题涉及从JavaScript编写/读取cookie


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

JavaScript cookie示例代码(参考:):

函数createCookie(名称、值、天数){
如果(天){
变量日期=新日期();
date.setTime(date.getTime()+(天*24*60*60*1000));
var expires=“;expires=“+date.togmString();
}
else var expires=“”;
document.cookie=name+“=”+value+expires+“path=/”;
}
函数readCookie(名称){
变量nameEQ=name+“=”;
var ca=document.cookie.split(“;”);
对于(变量i=0;i
我不认为有任何合理复杂的方法可以在不访问服务器端代码的情况下完成,因为您至少需要安装代码并识别HTML控件(例如,为了检查它们)。我给出了合理的代码,可以满足下面的要求

重要提示:

  • 代码要求为每个复选框指定一个不同的id属性
  • 检查状态存储在名为“JS_PERSISTENCE_cookie”的cookie中。最好将这个cookie的名称存储在一个变量中,而不是像我所做的那样将其硬编码在两个单独的地方。存储名称的变量类型取决于您的应用程序和要求
  • 最好将代码打包到一个对象中,而不是像我所做的那样将其打包成一堆免费函数。但是,这与您最初的问题无关
  • 单击一些复选框后,可以通过按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>
    
    
    //此函数读取cookie并选中/取消选中所有元素
    //已经被储存在里面了。它不会弄乱复选框
    //他的状态还没有被记录下来。
    函数restorePersistedCheckBox(){
    var aStatus=getPersistedCheckStatus();
    对于(变量i=0;i<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>