Question

我使用cookie来记住用户的偏好。基本上，我有一个左侧面板，可以使用按钮折叠或展开。当用户单击它时，我会通过cookie记住它的状态。

现在，我需要使页面的初始加载与Cookie所说的保持同步，以防止页面出现生硬现象。

这是<body class="mini-navbar">中的类。此类是否存在取决于状态。

我拥有获取和设置Cookie的所有方法。

我的问题是，如何在cookie加载页面之前动态地添加/删除该类？

Answer 1

您可以使用具有Razor语法的服务器端代码或纯JavaScript来实现您的方案。将JavaScript和服务器端代码混合用于cookie有时有时会产生意想不到的结果，因此，请采用纯服务器端方法或纯JavaScript方法。

在我的示例中，二进制cookie称为bodyStyle，其值为1或0。我正在创建一个永久cookie，该cookie从今天起30天到期，并且将在您域中的各个页面上可用/持久化。另外，您可以在创建Cookie时添加一些条件检查，也可以根据需要在两种方法中设置其值。

我要使用cookie值添加到正文的自定义类是miniNavBar。

服务器端方法

body标签通常会出现在共享视图中，因此请将下面的Razor代码添加到共享视图中。

C＃Razor代码使用二进制cookie动态设置主体类

@{
    //set bodyStyle cookie based on some condition using a if statement as per your requirements
    Response.Cookies["bodyStyle"].Value = "1";
    Response.Cookies["bodyStyle"].Expires = DateTime.Now.AddMinutes(2);
}

<body class="@(Response.Cookies["bodyStyle"].Value == "1" ? "miniNavBar" : "")">

JavaScript方法

下面的代码可以进入需要具有此逻辑的任何视图，或者如果要将其应用于所有视图，则可以将其添加到共享布局视图。

JavaScript代码使用二进制cookie动态设置主体类

<script type="text/javascript">

    //main cookie function that will contain your logic for creating the binary cookie
    function setBodyCookie() {
        //if perisistent cookie exists then do not create it         
        if (document.cookie.indexOf("bodyStyle=0") >= 0 || document.cookie.indexOf("bodyStyle=1") >= 0) {
               return;
        }

        //create body cookie if it does not exist
        //you can add an if statement here when creating a cookie based on your scenario
        var now = new Date();
        now.setTime(now.getTime() + 30 * 24 * 60 * 60 * 1000);//expire this in 30 days from now
        document.cookie = "bodyStyle=1;expires=" + now.toUTCString() + ";path=/";
    }

    $(document).ready(function () {
        //set binary cookie according to your requirements
        setBodyCookie();

        //add class to body if binary cookie has a value of 1
        if (document.cookie.indexOf("bodyStyle=1") >= 0) {
            $("body").addClass("miniNavBar");
        }
    });


</script>

如果要避免闪烁，另一种javascript解决方案是将文档就绪事件代码放置在标记中的body标签之后，并删除所使用的原始文档就绪事件，如下所示。您会注意到下面的代码中没有使用准备好的文档。

<body class="expandedNavBar">
<script>
            //set binary cookie according to your requirements
            setBodyCookie();

            //add class to body if binary cookie has a value of 1
            if (document.cookie.indexOf("bodyStyle=1") >= 0) {
                //remove all classes that are already there or just remove the
                //the ones you like to
                $("body").removeClass();
               //add your class now
                $("body").addClass("miniNavBar");
            }
</script>

另一种替代方法是，您可以使用.hide类来避免闪烁，因为在文档准备事件中，正文类已更改。如下面的示例代码所示。

<style>
   .hide{ visibility:hidden}
</style>
<script>
 $(document).ready(function () {
            //set binary cookie according to your requirements
            setBodyCookie();

            //add class to body if binary cookie has a value of 1
            if (document.cookie.indexOf("bodyStyle=1") >= 0) {
                $("body").removeClass("hide");//remove the hide class
                $("body").addClass("miniNavBar");
            }
        });
</script>
<body class="hide">

加载前设置HTML标签属性

1 个答案: