html实现网页阅读记录
时间: 2023-08-17 15:22:15 浏览: 51
要实现网页阅读记录,可以使用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>
```
这段代码会在用户打开网页时,自动保存浏览记录,并显示所有记录。用户可以在下次访问网页时,继续查看他们之前的浏览记录。