将唯一的本地存储与域上的唯一网页绑定的最佳方式

Question

我有一个 JavaScript 引擎，可以从典型的网页创建“杂志”。几个网页会有单独的“问题”，所有页面都使用相同的 javascript 引擎来驱动格式和行为。

该引擎使用本地存储来记住用户上次阅读该期杂志时所在的该期的“页面”。

localStorage.setItem('currentPage',JSON.stringify(currentPage));
var currentPage = JSON.parse(localStorage.getItem('currentPage'));
var remover = $('.article-wrapper:eq(' + currentPage + ')');

我的问题是，如果我访问一本名为“秋季”的杂志的第 5 页，关闭它并打开一本名为“春季”的杂志，那么我将自动从春季的第 5 页开始。

有没有办法可以为该问题的 html 中的每个问题设置唯一的“currentPage”变量名称，使用引擎的 javascript 读取它，然后将其保存到用户正在使用的计算机/设备的本地存储中？

您可以通过访问这两个站点来测试该问题。两者都打开。转到一个站点的第五页，然后刷新另一个站点。它将更改为其他页码。

http://straathof.acadnet.ca/autumn/

http://straathof.acadnet.ca/portfolio/

Answer 1

不要将 currentPage 存储为简单的整数，而是存储一个跟踪当前页面的 url 和该 url 的页面的对象。

例如：

// When saving the current page.
var currentPage = new Object();
var url = window.location.pathname;
currentPage[url] = 9;
localStorage.setItem('currentPage', JSON.stringify(currentPage));

// When loading the current page.
var currentPage = JSON.parse(localStorage.getItem('currentPage'));
var remove = $('.article-wrapper:eq(' + currentPage[url] + ')');

如果您不喜欢将完整的 URL 作为键，那么您可以使用 indexOf 来查找页面名称。有关更多信息，请参阅此 StackOverflow 答案。