PHP :将值和 Div 保存到另一个页面

PHP : Saving Values and Div to another page

本文关键字:另一个 保存 Div PHP      更新时间:2023-09-26

我试图让每个用户使用复选框 [show/hide]-div 方法使用 javascript 选择他感兴趣的市场字段,但我不知道保存每个用户选择的复选框-div,我是使用 cookie 还是将其保存到数据库以及如何在 PHP 中做到这一点?

    // function for show/hide divs depend on select input
  <script>
    function showMe (box) {
        var chboxs = document.getElementsByName("c1");
        var div = "none";
            for(var i=0; i<chboxs.length; i++) { 
                if(chboxs[i].checked){
                    div = "block";
                     break;
                }
            }
        document.getElementById(box).style.display = div;
    }
 </script>

用于选择商店字段的窗体

<form action="chooseShop.php" method="">
    <input type="checkbox" name="c1" value="Electrionics" Onclick="showMe('cssmenu_1')">Electrionics<br />
    <input type="checkbox" name="c1" value="Clothes" Onclick="showMe('cssmenu_2')">Clothes<br / >
    <input type="checkbox" name="c1" value="perfums" Onclick="showMe('cssmenu_3')" >perfums<br / >
    <button><a href="index.php">Next</a></button><br /><br />  
</from>
// THE Main DIVs
<div id='cssmenu' >
        <ul>
           <li class='active'><a href='#'><span>Much Me</span></a></li>
           <li class='last'><a href='#'><span>Profile </span></a></li>

           <li class='has-sub' id="cssmenu_1" style="display:none" ><a href='#'><span>Electrionics</span></a>
              <ul>
                 <li><a href='#'><span>Product 1</span></a></li>
                 <li><a href='#'><span>Product 2</span></a></li>
                 <li><a href='#'><span>Product 3</span></a></li>
                 <li><a href='#'><span>Product 4</span></a></li>
                 <li class='last'><a href='#'><span>Product 5</span></a></li>
              </ul>
           </li>

            <li class='has-sub' id="cssmenu_2" style="display:none"><a href='#'><span>Clothes</span></a>
              <ul>
                 <li><a href='#'><span>Product 1</span></a></li>
                 <li><a href='#'><span>Product 2</span></a></li>
                 <li><a href='#'><span>Product 3</span></a></li>
                 <li><a href='#'><span>Product 4</span></a></li>
                 <li class='last'><a href='#'><span>Product 5</span></a></li>
              </ul>
           </li>

            <li class='has-sub' id="cssmenu_3" style="display:none"><a href='#'><span>perfums</span></a>
              <ul>
                 <li><a href='#'><span>Product 1</span></a></li>
                 <li><a href='#'><span>Product 2</span></a></li>
                 <li><a href='#'><span>Product 3</span></a></li>
                 <li><a href='#'><span>Product 4</span></a></li>
                 <li class='last'><a href='#'><span>Product 5</span></a></li>
              </ul>
           </li>
    </div>

这取决于您要存储信息的时间。PHP 会话是最短的,它们只会持续用户打开选项卡的时间。

Cookie 的保质期次长,它们将在用户的浏览器中存储您可以设置的指定天数。

数据库用于存储长期使用的信息。如果您希望用户能够永久保存其首选项,这是执行此操作的最佳方法。

如果这是为了用户体验,并且您不必将值存储在数据库中的某个地方,我会使用本地存储。

这是一个有效的jsFiddle选择一个或两个框,然后单击运行,以便重新加载内页,您将看到您的选择在重新加载后被记住。

    function showMe(box) {
        //get and loop through all the checkboxes
        var chboxs = document.getElementsByName("c1");
        for (var i = 0; i < chboxs.length; i++) {
            if (chboxs[i].checked) {
                // if the box is checked, show group save the selection to local storage
                document.getElementById("cssmenu_"+i).style.display = "block";
                localStorage.setItem("hasGroup" + i, "yes");
            }
            else{
                //otherwise set each group in not visible and save state to local storage
                document.getElementById("cssmenu_"+i).style.display = "none";
                localStorage.setItem("hasGroup" + i , "no");
            }
        }
    }

window.onload=function(){
    //check for saved groups and display them if found
    var chboxs = document.getElementsByName("c1");
    for (var i = 0; i < chboxs.length; i++) {
        var div = "none";
        if (localStorage.getItem("hasGroup" + i ) == "yes") {
            div = "block";
            //re-check the box
            chboxs[i].checked = true;
        }
        document.getElementById('cssmenu_' + i).style.display = div;
    }
};
相关文章: