8_历史管理hash.html 1.1 KB

1234567891011121314151617181920212223242526272829303132333435363738394041
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>Document</title>
  7. </head>
  8. <body>
  9. <div class="box"></div>
  10. <button id="btn">按钮</button>
  11. <script>
  12. var oBtn = document.getElementById("btn");
  13. let oBox = document.querySelector(".box");
  14. var i = 1;
  15. var obj = {};
  16. oBtn.onclick = function(){
  17. // console.log(window.location)
  18. // window.location.href = "https://www.baidu.com";
  19. // location.hash = "haha";
  20. var str = `第${i}个页面`;
  21. oBox.innerText = str;
  22. location.hash = i;
  23. obj['#'+i] = str;
  24. i++;
  25. }
  26. window.onhashchange = function(e){
  27. // console.log(e);
  28. // console.log(obj[location.hash]);
  29. // console.log(location.hash);
  30. if(location.hash in obj){
  31. oBox.innerText = obj[location.hash]
  32. }else{
  33. oBox.innerText = "没有内容"
  34. }
  35. }
  36. </script>
  37. </body>
  38. </html>