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 に答える