在HTML 5中，使用历史记录。pushState函数。举个例子:

<script type="text/javascript">
var stateObj = { foo: "bar" };
function change_my_url()
{
   history.pushState(stateObj, "page 2", "bar.html");
}
var link = document.getElementById('click');
link.addEventListener('click', change_my_url, false);
</script>

和href:

<a href="#" id='click'>Click to change url to bar.html</a>

如果您希望在不向后退按钮列表添加条目的情况下更改URL，请使用历史记录。replaceState代替。

jQuery有一个很棒的插件，可以改变浏览器的URL，叫做jQuery-pusher。

JavaScript pushState和jQuery可以一起使用，比如:

历史。pushState(null, null， $(this).attr('href'));

例子:

$('a').click(function (event) {

  // Prevent default click action
  event.preventDefault();     

  // Detect if pushState is available
  if(history.pushState) {
    history.pushState(null, null, $(this).attr('href'));
  }
  return false;
});

只使用JavaScript history.pushState()，它会更改引用器，在更改状态后创建的XMLHttpRequest对象的HTTP报头中使用它。

例子:

window.history。pushState("object"， "Your New Title"， "/ New -url");

pushState()方法:

pushState()接受三个参数:一个状态对象、一个标题(当前被忽略)和一个URL(可选)。让我们更详细地分析这三个参数:

state object — The state object is a JavaScript object which is associated with the new history entry created by pushState(). Whenever the user navigates to the new state, a popstate event is fired, and the state property of the event contains a copy of the history entry's state object. The state object can be anything that can be serialized. Because Firefox saves state objects to the user's disk so they can be restored after the user restarts her browser, we impose a size limit of 640k characters on the serialized representation of a state object. If you pass a state object whose serialized representation is larger than this to pushState(), the method will throw an exception. If you need more space than this, you're encouraged to use sessionStorage and/or localStorage. title — Firefox currently ignores this parameter, although it may use it in the future. Passing the empty string here should be safe against future changes to the method. Alternatively, you could pass a short title for the state to which you're moving. URL — The new history entry's URL is given by this parameter. Note that the browser won't attempt to load this URL after a call to pushState(), but it might attempt to load the URL later, for instance after the user restarts her browser. The new URL does not need to be absolute; if it's relative, it's resolved relative to the current URL. The new URL must be of the same origin as the current URL; otherwise, pushState() will throw an exception. This parameter is optional; if it isn't specified, it's set to the document's current URL.

window.location.href包含当前URL。您可以读取它，可以添加到它，也可以替换它，这可能会导致页面重新加载。

如果，就像听起来的那样，你想在URL中记录javascript状态，这样它就可以被书签，而不需要重新加载页面，将它附加到当前URL的#后面，并让onload事件触发的一段javascript解析当前URL，以查看它是否包含保存的状态。

如果你使用?而不是#，您将强制页面重新加载，但由于您将在加载时解析保存的状态，这实际上可能不是一个问题;这将使前进和后退按钮也能正常工作。

我的代码是:

//change address bar
function setLocation(curLoc){
    try {
        history.pushState(null, null, curLoc);
        return false;
    } catch(e) {}
        location.hash = '#' + curLoc;
}

和行动:

setLocation('http://example.com/your-url-here');

和示例

$(document).ready(function(){
    $('nav li a').on('click', function(){
        if($(this).hasClass('active')) {

        } else {
            setLocation($(this).attr('href'));
        }
            return false;
    });
});

这就是全部:)

我想知道如果它是可能的，只要在页面上的父路径是相同的，只有新的东西被追加到它。

比如，假设用户在http://domain.com/site/page.html页面 然后浏览器允许我进行定位。Append = new.html 页面变成:http://domain.com/site/page.htmlnew.html，浏览器不会更改它。

或者允许用户改变get参数，这里是location。Get = me=1&page=1。

所以原来的页面变成http://domain.com/site/page.html?me=1&page=1，它不刷新。

#的问题是，当哈希被改变时，数据不会被缓存(至少我不这么认为)。这就像每次加载一个新页面时，而非ajax页面中的后退和前进按钮能够缓存数据，而不需要花费时间重新加载数据。

据我所知，雅虎历史记录已经一次性加载了所有数据。它似乎没有执行任何Ajax请求。因此，当使用div处理不同的方法时，不会为每个历史状态存储数据。

在HTML 5中，使用历史记录。pushState函数。举个例子:

<script type="text/javascript">
var stateObj = { foo: "bar" };
function change_my_url()
{
   history.pushState(stateObj, "page 2", "bar.html");
}
var link = document.getElementById('click');
link.addEventListener('click', change_my_url, false);
</script>

和href:

<a href="#" id='click'>Click to change url to bar.html</a>

如果您希望在不向后退按钮列表添加条目的情况下更改URL，请使用历史记录。replaceState代替。