如果你曾经访问过一个网页，感觉上面的内容特别有用，你或许希望能够保存这个网页，以便以后再次查看。这时，使用JavaScript保存访问过的网页就变得特别有用了。它可以让我们在浏览器中创建一个“阅读列表”，将这个列表保存在浏览器本地，以便随时随地查看我们之前保存的网页。

其实，在JavaScript中保存网页并不难，它利用了浏览器提供的API完成这个任务，下面我们来看看如何实现：

1、保存网页的HTML和URL

const savePage = () =>{
const pageHTML = document.documentElement.innerHTML; //获取当前网页的HTML
const pageURL = window.location.href; //获取当前网页的URL
localStorage.setItem(pageURL, pageHTML); //将HTML和URL存储在本地缓存中
}

代码解释：

首先，我们定义一个savePage函数，用来保存当前网页。然后，通过document.documentElement.innerHTML获取当前网页的HTML，并使用window.location.href获取当前网页的URL。最后，将HTML和URL存储在localStorage中，其中，pageURL作为localStorage的键，pageHTML作为值。

在这个例子中，我们使用了localStorage API，它提供了与Cookie类似的简单键值对存储机制，但永久存储在用户的浏览器中。因此，使用localStorage保存网页后，即使关闭浏览器再次打开，保存的网页也能够得到保留。

2、批量保存和删除页面

const saveAllPages = () =>{
const links = document.getElementsByTagName('a'); //获取页面上所有的链接标签
for (let i = 0; i< links.length; i++) {
links[i].addEventListener('click', (event) =>{
event.preventDefault(); //阻止链接的默认行为，即跳转到新页面
const pageURL = event.target.href;
const pageHTML = localStorage.getItem(pageURL) || document.documentElement.innerHTML; //如果localStorage中有该网页的HTML缓存，则直接获取，否则重新获取HTML
localStorage.setItem(pageURL, pageHTML);
});
}
}
const deletePage = (pageURL) =>{
localStorage.removeItem(pageURL);
}

代码解释：

代码中的saveAllPages函数，可以自动保存用户访问过的网页。我们通过获取网页中所有的链接标签（a标签），然后绑定一个事件监听器，当用户点击链接时，阻止链接的默认行为（即跳转到新页面），获取链接对应的页面URL和HTML，将它们存储在localStorage中。

我们还定义了一个deletePage函数来删除localStorage中的保存的页面。这个函数只需要使用localStorage.removeItem(pageURL)方法即可。

总结：

通过本文介绍的方法，我们可以很容易地保存网页及其URL，并创建一个阅读列表，方便用户随时查看以前保存的网页。当然，我们还可以使用其他的方式来优化和增强这些功能，比如增加页码分页、下拉刷新等等，这样能够让我们更好地管理保存的网页。