10
0

9_历史管理history.html 792 B

123456789101112131415161718192021222324252627282930313233
  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 id="box"></div>
  10. <button id="btn">按钮</button>
  11. <script>
  12. var oBxo = document.querySelector("#box");
  13. var oBtn = document.querySelector("#btn");
  14. var i = 1;
  15. var obj = {};
  16. oBtn.onclick = function(){
  17. history.pushState(i,"");
  18. var str = `第${i}个页面`
  19. oBxo.innerText = str;
  20. obj[i] = str;
  21. // console.log(history);
  22. i++;
  23. }
  24. window.onpopstate = function(e){
  25. console.log(e)
  26. oBxo.innerText = obj[e.state]
  27. }
  28. </script>
  29. </body>
  30. </html>