Html 如何在本地保存和存储用户输入？

我制作了一个用于收集漫画的HTML浏览器数据库，现在一切都很好，除了我已经为那些与我共享的人添加了选项，以便在选定的漫画页面上打勾（自己？重印？收藏？）。但在刷新或离开页面时，勾选的选项将消失

我想让它保存在本地，因为它只是为了这个目的而制作的，不是在线的。基本上，将其保存在本地，这将保存勾选的用户选择，并将它们存储在用户选择中，以便在计划（我的收藏）选项卡中，它将包含您拥有的所有勾选漫画、已重印和/或喜爱的漫画

我根本不知道怎么做，所以我请求帮助

我的HTML页面中已经包含的代码：

            <form>
            <input type="checkbox" id="own" name="own" value="Own?">
            <label for="own">Own?</label>
            <input type="checkbox" id="reprint" name="reprint" value="Reprint?">
            <label for="reprint">Reprint?</label>
            <input type="checkbox" id="favorite" name="favorite" value="Favorite">
            <label for="favorite">Favorite</label>
        </form>

拥有
重印？
最喜欢的

我会这样做：

// accepts single representation of comic
function addFavorite(favorite) {
    // full list of favorited comics
    var favorites = localStorage.getItem("favorites");

    // add new favorite to list
    favorites.push(favorite);

    // store the list in localStorage again (remove it first)
    localStorage.removeItem("favorites");
    localStorage.setItem("favorites", favorites);
}

您可能希望在事件中使用它，而不是在命名函数中使用它，这样您就可以使用html数据属性，而不是将变量传递到函数中，等等

[编辑-见评论]

// accepts single representation of comic with key
// where key is favorite/own/reprint and is expandable
function addStorage(key, value) {
    // full list of comics by key
    var list = localStorage.getItem(key);

    // add new favorite to list
    list.push(value);

    // store the list in localStorage again (remove it first)
    localStorage.removeItem(list);
    localStorage.setItem(key, list);
}

您仍然需要将其附加到单击或其他事件。你可以试试

<img src="favorite_star.png" onClick="addStorage('favorites', 'Superman 3')">

---

HTML是一种“前端语言”。它在显示基于web的应用程序（如您的项目）的信息方面非常有效，但您需要将后端集成到应用程序中

由于您正在构建数据库，我建议您使用sql server或存储此信息。使用PHP、python、java等将有助于加载数据并将过滤器应用于前端

或者，您也可以使用javascript并使用请求的过滤器显示此信息。如果项目计划是列出用户交互很少的漫画，javascript/json将完成这项工作

--------------编辑---------------------------

---

如果除了应用过滤器之外不需要用户输入，我建议使用和一个json文件。

您正在查找

localStorage

。读这篇文章：你应该使用或与Javascript@MoshFeu-谢谢你，但是。。。我对这个很陌生！因此，我希望看到一些示例，而不仅仅是对初学者毫无意义的一行行文字：（关于这些主题有很多资源。这就是为什么我发表了评论而没有回答。教程的请求在这里是离题的，所以只要提到技术的名称就足以让您开始探索。嘿，MaKR，谢谢您的回复，这将出现在HTML页面上，我希望它能正常工作，对吗？或者CSS？从右侧开始now每个漫画都有自己的HTML页面，我是用模板制作的。就我所知，这只适用于（收藏夹）对吗？我必须为（自己的？）和（重印？）总共做3次。正确与否？抱歉，我对这部分编码还不熟悉：）这将是使用标记的JavaScript。您可以在两者之间粘贴，也可以在任何一种情况下使用，并且不要忘记关闭标记。作为一般规则，我会首先在html标题中执行全局变量，然后在正文末尾声明事件。是的，您将执行3次，我将执行edi因此，你可以看到它如何更动态地工作。在原始帖子中添加了勾选框的部分代码，如果有帮助的话：）请帮我看看这个，我不知道如何添加Javascript，我在这方面没有任何经验。再次感谢：）使用复选框和删除项目会让事情变得更复杂。最好的方法是先学习JS变量、数组和对象的教程，然后是localStorage，最后是事件绑定。您可能还需要研究JQuery的事件绑定。如果我要写一个专业的页面来做这件事，我会使用VueJS，如果你首先学习JS，这是很容易学会的。是的，我知道这一点，但不幸的是，它只打算在本地使用，所以：）这样会更容易一些。如果您不希望有任何用户输入，而不是应用过滤器，那么datatables将是最简单的方法。已经构建了库和实例，只需添加数据并调用函数。我已经更新了我的答案，以反映这一点，并提供链接。