javascript - 尝试为学习伙伴类型网站制作进度计数器

Question

用户填写了包含页数的输入表单，我希望用户能够输入完成的页数(var pagesToBeSubtracted)以及减去页数并在网站上更新的函数。

function subtractPages() {
 // Total pages that are grabbed from the input form
var totalPages = document.getElementById("numPages").value;

//Value of the input type number for done pages
var pagesToBeSubtracted = document.getElementById("donePages").value;

var remainingPages;

remainingPages = totalPages - pagesToBeSubtracted;

//Updating the number on the actual website
document.getElementById("pagesLeft").innerHTML = remainingPages;

但是，如果您的总页数为 100，并且您输入了 5 页，它将变为 95，但如果您再次按下它，它将保持不变，如果您将其增加到 10，它将下降到 90，依此类推。 ..

我知道我应该以某种方式保存结果，以便下次调用该函数时，它不会每次都从原始数字开始，而是从更新后的数字开始。但我不知道如何做到这一点，因为我从输入表单中设置了总页数变量，并且每次调用该函数时都会再次将其设置为相同的数字。

我确信我错过了一些基本的东西，但我无法弄清楚。

Answer 1

用户在输入表单中提交值后，您可以使用 localStorage 保存该值。然后，您可以在用户重新访问您的网站时访问该值。 localStorage 在用户浏览器本地存储数据。当浏览器/计算机关闭时，数据不会被删除。

您可以使用 localStorage 的 setItem 方法存储值:

 localStorage.setItem("totalPages", numberOfTotalPages);
 localStorage.setItem("pagesToBeSubtracted", numberOfPagesToBeSubtracted);

可以使用localStorage的getItem方法获取存储的值

document.getElementById("pagesLeft").innerHTML = localStorage.getItem("totalPages")-localStorage.getItem("pagesToBeSubtracted");