学习笔记：location.hash和history.pushState()

在浏览器中改变地址栏url，将会触发页面资源的重新加载，这使得我们可以在不同的页面间进行跳转，得以浏览不同的内容。但随着单页应用的增多，越来越多的网站采用ajax来加载资源。因为异步加载的特性，地址栏上的资源路径没有被改变，随之而来的问题就是页面的状态无法被保存。这导致我们难以通过熟悉的方式（点击浏览器前进/后退按钮），在前后的页面状态间进行切换。

为了解决ajax页面状态不能返回的问题，人们想出了一些曲线救国的方法，比如利用浏览器hash的特性，将新的资源路径伪装成锚点，通过onhashchange事件来改变状态，同时又避免了浏览器刷新。但这样始终显得有些hack。

现在HTML5规范为 window.history引入了两个新api，pushState 和 replaceState，我们可以使用它很方便的达到改变url不重载页面的目的

——引用于https://blog.csdn.net/helloxiaoliang/article/details/73850428

location.hash和location

当一个页面的（显示）状态被改变时，可以通过location.hash实现刷新页面后或者copy页面的URL再打开后保持状态而不还原。

当hash只有一个#时，location.hash返回空字符串；当hash不止一个#时，location.hash返回#以及#后面的部分。

当 一个window的 hash （URL 中 # 以及#后面的部分，可通过location.hash返回）改变时就会触发 hashchange 事件。

window.location属性返回一个有文档的当前位置的信息的Location对象。

语法：var oldLocation = location; location = newLocation;

无论什么时候，当一个新值被赋予location对象，一个文档将通过这个URL被加载，就像是location.assign()被这个URL调用了一样。

location.reload(true);：强制从服务器重新加载当前页面。

location.replace('http://example.com/#' + location.pathname);：将通过使用replace()方法插入location.pathname的值进hash来重新加载页面。注意，这replace()方法和字符串的replace()方法不是一个东西。

location.search = sData;：通过改变search属性来发送一个字符串数据给服务器。"?Some%20data"添加到当前的URL，然后URL被送到服务器（如果服务器没有采取动作，当前文档就用这个改变的search字符串重新加载）。

操纵浏览器历史

DOM window 对象通过 history 对象提供了对浏览器历史的访问。

window.history.back();：和用户点击浏览器回退按钮的效果相同。类似的还有window.history.forward();和window.history.go(Num);。另外，window.history.length; 可以获得历史堆栈中页面的数量。执行history.back()或history.forward()后会触发 window.onpopstate事件。

pushState()方法绝不会导致hashchange 事件被激活，就算新的URL和旧的只在hash上有区别。

history.pushState() 方法和history.replaceState()方法分别可以添加和改变历史实体。这两个方法要和window.onpopstate事件一起用。push和pop说明它们的行为就像栈。popstate事件会被触发当一个文档的激活的历史实体改变。如果激活的历史实体是由history.pushState()创建的，或者是被history.replaceState()改变过，那popstate事件的state属性（即e.state）会包含一个该激活的历史实体的sate对象的副本；如果不是，那e.state的值为null。调用history.pushState()方法和history.replaceState()方法不会触发popstate事件，the popstate event is only triggered by performing a browser action, such as clicking on the back button (or calling history.back() in JavaScript)。现在的浏览器加载页面时都不会触发popstate事件了（以前有的浏览器会）。

举个例子。history.pushState({ foo: "bar" }, "", "bar.html");会使地址栏的http://mozilla.org/foo.html变成http://mozilla.org/bar.html，但是不会使浏览器加载http://mozilla.org/bar.html，甚至都不会使浏览器检查http://mozilla.org/bar.html是否存在。假设用户在这个页面导航到了http://google.com，然后点击浏览器的回退按钮。这时，地址栏变成http://mozilla.org/bar.html，而且浏览器会加载http://mozilla.org/bar.html。如果这时你读取history.state，你会得到{ foo: "bar" }（即history.pushState()的第一个参数）。这时popstate事件不将被触发（？），因为页面是通过被加载而显示的（页面加载时触发的是load事件而不是popstate事件）。如果我们再点击回退按钮，才会回到http://mozilla.org/foo.html，这时文档会获得一个popstate事件（可以通过这个事件改变文档内容），且history.state是null。总之，history.pushState()会添加一个历史实体并激活它（也就是现在的页面变成新添加的历史实体了），但暂时还是显示原来的历史实体，只有当再次回到这个页面时（包括刷新，但是要注意刷新不会触发popstate事件哦，只有前进和后退会触发）才会显示新添加的历史实体。

history.pushState()接收三个参数，一个对象（用作state），一个字符串（用作标题，但是目前都被浏览器忽略），一个字符串（用作URL，是可选的）：

·state会成为history.pushState()添加的历史实体的属性，可以用history.state获得。传入state的参数要能字符串化，比如能用JSON字符串化，因为火狐浏览器会把state这个对象存在用户的磁盘，以便当用户重启浏览器时state这个对象能恢复实际伤并不能恢复。state这个对象字符串化后的大小有限制（火狐是640K），如果需要更多的空间，你应该使用sessionStorage 和/或localStorage。

·第二个参数传入空的字符串即可。

·传入的URL可以是相对的也可以是绝对的。如果是相对的，它将相对于当前的URL被解析。传入的URL必须和当前的URL同源。如果不传入URL，则会被设置为当前的URL。

总之，调用pushState()和设置window.location = "#foo"（设置hash，与window.location.hash = "#foo"等效，且window.可省略）很像，两者都创建了并激活了一个新的历史实体。但是前者由以下优点：

1.         新的URL可以是任何和当前URL同源的URL，而设置window.location让你智能呆在同一个文档里，因为你只改变了hash。

2.         你可以不改变URL而创建新的历史实体，而通过设置window.location = "#foo";创建一个新的历史实体则必须要求当前的hash不是#foo。

3.         你可以在state中放入任何数据，而用hash就只能在URL末尾放入短字符串形式的数据。

history.replaceState()和history.pushState()很像，除了是改变当前的历史实体而不是创建一个新的。当你像更新当前的历史实体的state对象或URL来响应用户的行为时，replaceState()相当有用。