jquery - 如何在离开并再次导航后保持页面状态？

Question

我创建了一个扩展阅读更多部分的按钮。这很好用。

// CODE TO EXTEND READ MORE SECTION
$("#readMoreDiary").on("click", function(){

    $("#diary-content").addClass("showTextThree");
    $("#readMoreDiary").addClass("hide");
    $("#closeDiary").removeClass("hideExitDiary");

    $(".showTextThree").addClass("animated fadeIn");
    $(".showTextThree").one("animationend",function(){

        $(this).removeClass("animated fadeIn");
    });
});

从 page2.php 返回到索引页时，我希望此“阅读更多” 部分保持打开状态。 (page2.php 将从阅读更多部分访问。)

因此，如果有人正在查看Extended Read More 部分，点击 page2 的链接然后返回，我想返回到索引页面，但是扩展了 Read More 部分.

我该如何解决这个问题？

Answer 1

一种可能的解决方案，因为您似乎需要维护状态。使用 Localstorage，在您从 home 转换到 page2 时设置一个标志，并在从 page2 转换回 home 时取消设置标志。检查标志，并显示“扩展版本”

<script type="text/javascript">
$(document).ready(function(){
    var ls = $.localStorage;
    var flag = ls.get("flag_show");

    if( flag != null && flag == true ) {
        $("#diary-content").addClass("showTextThree");
        $("#readMoreDiary").addClass("hide");
        $("#closeDiary").removeClass("hideExitDiary");

        // UNSET THE FLAG IF YOU DON'T NEED TO MAINTAIN STATES
        ls.remove("flag_show");
    }

    $("#readMoreDiary").on("click", function(){
         // your code here
         // SET THE FLAG IN LOCALSTORAGE
         ls.set("flag_show", true);
     });
});


</script>

使用来自 here 的 jQuery 的 LocalStorage API