HTML5中的history.pushstate怎么使用

在HTML5中，history.pushState()方法可以用于在浏览器历史记录中添加新的状态（页面）而无需刷新页面。可以使用以下步骤来使用history.pushState()方法：

1. 获取当前页面的URL和标题。

var url = window.location.href;
var title = document.title;

2. 使用history.pushState()方法添加新的状态。

var state = {url: url, title: title};
var newUrl = "新的URL";
var newTitle = "新的标题";
history.pushState(state, newTitle, newUrl);

3. 更新页面内容，这可以是通过Ajax加载新的内容，或者使用其他方法更新DOM。

// 通过Ajax加载新的内容
$.ajax({
    url: newUrl,
    success: function(data) {
        $("#content").html(data);
    }
});

4. 更新页面标题。

document.title = newTitle;

5. 监听popstate事件，以便在用户点击浏览器的后退/前进按钮时更新页面内容。

window.addEventListener("popstate", function(event) {
    var state = event.state;
    if (state) {
        var url = state.url;
        var title = state.title;
        
        // 更新页面内容
        $.ajax({
            url: url,
            success: function(data) {
                $("#content").html(data);
            }
        });
        
        // 更新页面标题
        document.title = title;
    }
});

请注意，history.pushState()方法只会添加新的状态到浏览器历史记录中，但不会更新页面内容。您需要使用其他方法（如Ajax）来更新页面的内容。