首页html实现网页阅读记录

html实现网页阅读记录

时间: 2023-08-17 19:22:15 浏览: 52

要实现网页阅读记录，可以使用HTML5的Local Storage来存储用户的浏览记录。当用户打开网页时，可以使用JavaScript代码来读取Local Storage中保存的浏览记录，然后将记录显示在网页中。以下是一个简单的示例代码： ```html <!DOCTYPE html> <html> <head> <title>网页阅读记录</title> <script type="text/javascript"> // 保存浏览记录 function saveRecord() { var url = window.location.href; var title = document.title; var records = localStorage.getItem("records"); if (!records) { records = []; } else { records = JSON.parse(records); } records.push({ "url": url, "title": title, "time": new Date().getTime() }); localStorage.setItem("records", JSON.stringify(records)); } // 显示浏览记录 function showRecords() { var records = localStorage.getItem("records"); if (records) { records = JSON.parse(records); var list = document.getElementById("recordList"); for (var i = 0; i < records.length; i++) { var item = document.createElement("li"); var link = document.createElement("a"); link.href = records[i].url; link.innerText = records[i].title; item.appendChild(link); list.appendChild(item); } } } </script> </head> <body onload="showRecords()"> <h1>网页阅读记录</h1> <p>欢迎来到本网站，以下是您的浏览记录：</p> <ul id="recordList"></ul> <script type="text/javascript"> // 保存浏览记录 saveRecord(); </script> </body> </html> ``` 这段代码会在用户打开网页时，自动保存浏览记录，并显示所有记录。用户可以在下次访问网页时，继续查看他们之前的浏览记录。