Question

我已经建立了一个用于收集漫画的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>

Answer 1

https://www.w3schools.com/jsref/prop_win_localstorage.asp

我会做这样的事情：

// 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')">

Answer 2

HTML是一种“前端语言”。它可以很好地显示基于Web的应用程序（例如项目）的信息，但是您需要将后端集成到您的应用程序中。

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

或者，您也使用javascript和json来显示此信息以及所请求的过滤器。如果项目计划是在用户互动很少的情况下列出漫画，则javascript / json将完成工作。

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

如果除了应用过滤器之外，没有其他用户期望输入，我建议使用datatables和一个json文件。

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

2 个答案: