jquery - 离开并再次返回后如何保持页面状态？

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

// 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。）

因此，如果有人在“扩展的更多内容”部分中单击page2的链接，然后返回，则我想返回索引页面，但扩展了“更多内容”部分。

我怎么解决这个问题？

最佳答案

一种可能的解决方案，似乎您需要维护状态。
从本地到page2转换时，使用Localstorage来设置标记，而从page2转换回主页时，请取消设置标记。
检查标志，并显示“ EXTENDED VERSION”

<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