location.href和location.replace()区别
分类：实例代码
本章节介绍一下标题中两个概念的区别，希望能够给需要的朋友带来一定的帮助。
通过这种方式来实现url的跳转功能，在表面上看效果是一样的，其实内在的区别还是很大的。
代码实例如下:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="author" content="http://www.pipipi.net/" />
<title>前端教程网</title>
<script>
window.onload=function(){
var btOne=document.getElementById("one");
var btTwo=document.getElementById("two");
btOne.onclick=function(){
location.href="http://www.pipipi.net";
}
btTwo.onclick=function(){
location.replace("http://www.pipipi.net");
}
}
</script>
</head>
<body>
<input type="button" id="one" value="loaction.href"/>
<input type="button" id="two" value="replace"/>
</body>
</html>
上面的代码演示两种方式实现页面的跳转，下面介绍一下两者的区别。
特别说明:请将代码复制到本地测试，在本编辑器可能无法测试正确的效果。
如果使用location.href，那么我们可以使用浏览器的返回按钮回到之前的页面，截图如下:
如果使用loaction.replace()方式，那么则无法使用返回按钮，截图如下:
下面说明一下原因：
访问页面的时候通常会在本地有缓存，使用location.href方式，只是打开一个新的页面，在历史记录中追加一条。
但是使用location.replace()方法，它会替换上一个页面在本地的缓存，自然就不会使用返回上一页了。