如何在页面刷新时加载点击过的Div对应的URL？

这是单页内容切换场景里很常见的需求——咱们可以通过两种简单的方式实现状态持久化，让页面刷新后自动回到用户上次浏览的内容：

方法一：使用localStorage（浏览器本地存储） #

这种方式会把用户最后访问的页面存在浏览器里，仅针对当前用户的设备生效：

修改你的JavaScript代码： #

$(document).ready(function(){
    // 页面初始化时，先读取本地存储的页面，没有则用默认的home.php
    var activePage = localStorage.getItem('activePage') || 'home.php';
    $("#main_content").load(activePage);

    $("#home").click(function(){
        var page = 'home.php';
        $("#main_content").load(page);
        // 点击时把当前页面存到localStorage
        localStorage.setItem('activePage', page);
    });

    $("#write").click(function(){
        var page = 'write.php';
        $("#main_content").load(page);
        localStorage.setItem('activePage', page);
    });
});

原理说明： #

• localStorage.setItem(key, value)：把要记住的页面路径存在浏览器里，除非用户手动清除缓存，否则数据会一直保留。
• 页面初始化时用localStorage.getItem('activePage')读取保存的值，有值就加载对应页面，没有就用默认的home.php。

方法二：使用URL Hash（地址栏哈希） #

这种方式的好处是可以分享链接，其他人打开链接时会直接看到对应的内容，同时刷新页面也能保持状态：

修改后的JavaScript代码： #

$(document).ready(function(){
    // 初始化时根据hash加载对应页面，默认home.php
    function loadPageFromHash(){
        var hash = window.location.hash.slice(1); // 去掉#号
        var page = hash === 'write' ? 'write.php' : 'home.php';
        $("#main_content").load(page);
    }

    // 页面加载时执行一次
    loadPageFromHash();

    // 监听hash变化，切换内容
    $(window).on('hashchange', loadPageFromHash);

    $("#home").click(function(){
        window.location.hash = 'home';
    });

    $("#write").click(function(){
        window.location.hash = 'write';
    });
});

原理说明： #

• 点击菜单时修改地址栏的hash（比如#home或#write），浏览器不会刷新整个页面，但会记录这个状态。
• 页面初始化和hashchange事件触发时，根据hash值加载对应的页面。
• 这种方式支持书签和分享链接，用户把链接发给别人，打开后会直接显示对应的内容。

你可以根据自己的需求选择其中一种方法，两种都能完美解决刷新页面回到初始状态的问题~

内容的提问来源于stack exchange，提问作者Mack Trivedi