页面刷新可防止将HTML附加到DOM

Question

我有一个悬停菜单，但是由于移动设备上的悬停限制（用户无法点击页面并在屏幕上保留菜单，因为它在页面刷新时消失）我创建了以下功能，可以让他们做然而，当页面刷新时，菜单没有被附加到DOM（我可以在页面刷新之前在屏幕上看到它一瞬间）。有什么想法吗？

$('ul.dropdown').empty().append(localStorage.getItem("listHTML"));

功能 -

<script>
    $(document).ready(function () {

        //on mobile only due to hover limitations -
        //(we desire to click a parent menu link that goes to its homepage AND show the hover menu that was clicked and its children)
        //therefore we want to send the user to the homepage of the clicked menu item (parent)
        //AND display its sub menu items (children) again in a menu.
        if ($(window).width() <= 939) {


            $("li.sub-level").click(function () {


                    if (typeof (Storage) !== "undefined") {

                        var listHTML = $(this).find(".dropdown").html();
                        var nodeTITLE = $(this).children().clone().html();

                        localStorage.setItem("listHTML", listHTML);
                        localStorage.setItem("nodeTITLE", nodeTITLE);

                        //test stubs
                        alert(listHTML);
                        alert(nodeTITLE);

                }
                else {

                        alert('Your browser does not support HTML5 storage, please report this.')
                    }


                //at this point remove the class that stops this link from executing the anchor and take the user to target page
                $(this).removeClass("has-dropdown");


                //alert('about to write the listHTML into the DOM');

                //now finally append the listHTML to the menu as the page has refreshed - 
                //NOT WORKING AS PAGE REFRESH WIPING OUT THE HTML!
                $('ul.dropdown').empty().append(localStorage.getItem("listHTML"));

            });
        }
    });
</script>

HTML -

<ul class="dropdown"><li class="title back js-generated"><h5><a href="#">Back</a></h5></li>
            <li>

                <a href="http://scotsman.v6hotelsites.local/scotsman-hotel/about/" target="">
Introducing the Scotsman
                </a>

            </li>
            <li>

                <a href="http://scotsman.v6hotelsites.local/scotsman-hotel/about/history/" target="_self">
History
                </a>

            </li>
            <li>

                <a href="http://scotsman.v6hotelsites.local/scotsman-hotel/about/concierge/" target="_self">
Concierge
                </a>

            </li>
            <li>

                <a href="http://scotsman.v6hotelsites.local/scotsman-hotel/about/location/" target="_self">
Location
                </a>

            </li>
            <li>

                <a href="http://scotsman.v6hotelsites.local/scotsman-hotel/about/hotel-services/" target="_self">
Hotel Services
                </a>

            </li>
    </ul>

感谢。