Javascript - 将页面保存到本地存储
Posted
技术标签:
【中文标题】Javascript - 将页面保存到本地存储【英文标题】：Javascript - save page to localstorage 【发布时间】：2018-09-26 15:48:08 【问题描述】：我有一个包含多个页面的网站：page001.html、page002.html... page199.html...
如何使用 localsave 让它记住用户所在的页面，并让用户在返回网站时能够加载相同的页面？
我打算有保存和加载按钮。我只是对 setItem 和 getItem 在这种情况下的工作方式感到困惑。值应该是多少？
我尝试过这样的事情：
Page001.html
function savePage()
localStorage.setItem("lastPageVisited", '001.html');
<p>This is page 001</p>
<a href="002.html">Go to the Next Page</a>
<button onclick="savePage()">Save</button>Page002.html
function savePage()
localStorage.setItem("lastPageVisited", '002.html');
function loadPage()
localStorage.getItem("lastPageVisited");
window.location.href = 'LastPageVisited';
<p>This is page 002</p>
<a href="003.html">Go to the Next Page</a>
<button onclick="savePage()">Save</button>
<button onclick="loadPage()">Load</button>我希望这个问题有意义。我仍在学习 javascript，可能没有以最正确的方式表达它。
【问题讨论】：
只存储号码。或者文件名。没关系，只要您可以从存储的任何内容转到pageXXX.html 或者您可以简单地存储document.location.href。
到目前为止，您尝试了哪些但没有成功？像localStorage.setItem('last-page-visited', 'page001.html'); 这样简单的调用会为您节省一些数据。
这是一个静态网站吧？
@Tom 我刚刚用我迄今为止尝试过的内容更新了帖子，但没有成功。
@Nguyễn Thanh Tú，是的。我更新了我的帖子，用我迄今为止尝试过的内容。
【参考方案1】：
我刚刚为您制作了一个超小样本。希望对您有所帮助。
我们的静态网站将包含三个页面：
Index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Index</title>
</head>
<body>
<h2>This is the Index page</h2>
<a href="home.html">Home</a>
<a href="about.html">About</a>
<button onclick="savePage()">Save</button>
<button onclick="loadPage()">Load</button>
<script>
function savePage()
localStorage.setItem("lastPageVisited", '/index.html');
function loadPage()
const page = localStorage.getItem("lastPageVisited");
const pathname = window.location.pathname;
const url = window.location.href.replace(pathname, page);
window.location.replace(url);
</script>
</body>
</html>Home.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Home</title>
</head>
<body>
<h2>This is the Home page</h2>
<a href="index.html">Index</a>
<a href="about.html">About</a>
<button onclick="savePage()">Save</button>
<button onclick="loadPage()">Load</button>
<script>
function savePage()
localStorage.setItem("lastPageVisited", '/home.html');
function loadPage()
const page = localStorage.getItem("lastPageVisited");
const pathname = window.location.pathname;
const url = window.location.href.replace(pathname, page);
window.location.replace(url);
</script>
</body>
</html>-
关于.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>About</title>
</head>
<body>
<h2>This is the About page</h2>
<a href="index.html">Index</a>
<a href="home.html">About</a>
<button onclick="savePage()">Save</button>
<button onclick="loadPage()">Load</button>
<script>
function savePage()
localStorage.setItem("lastPageVisited", '/about.html');
function loadPage()
const page = localStorage.getItem("lastPageVisited");
const pathname = window.location.pathname;
const url = window.location.href.replace(pathname, page);
window.location.replace(url);
</script>
</body>
</html>这里的关键是使用window.location.replace() 方法。此方法允许您用新文档替换当前文档。然后，在他的window.location.replace() 方法的帮助下，我们只需计算url string 以匹配我们的网站站点地图。
【讨论】：
以上是关于Javascript - 将页面保存到本地存储的主要内容，如果未能解决你的问题，请参考以下文章