Cookie还是本地存储是最好的方式？

我有一些脚本，其中我需要cookie或本地存储来确保变量不会丢失。 我是一个初学者，我不确定哪一个是最好的，但我知道两者做的事情差不多。 基本上，我需要存储Java脚本正在做的任何事情，甚至当用户注销/登录时，在任何天数之间仍会保存。

有人能帮忙吗？

<script>
    $(document).ready(function() {
        $("input").click(function(e) {
            e.preventDefault();
            var $challenge_div = $(this).parent().parent();
            $challenge_div.data("finish", "false");
            $challenge_div.removeClass("show").addClass("hide");

            var $challenge_list = $("div[class='hide']");

            $.each($challenge_list, function() {
                var new_challenge = $(this);
                if (new_challenge.data("finish") == false) {
                    new_challenge.removeClass("hide").addClass("show");
                    return false;
                }
            });

            if ($("div[class='show']").length == 0) {
                $("#message p").html("You finished all your challenges !");
            }
        });
    });
</script>

---

解决方案

我是初学者，我不确定使用哪一个最好，但我知道两者做的事情差不多。

实际上，它们做的事情非常不同。

• Cookies用于针对每个HTTP请求在服务器和客户端之间来回发送信息。
• Web storage仅用于在客户端存储信息。

对于您的用例，Web存储将是正确的选择，因为您只需要客户端的信息。它也有一个合理的API(不像Cookie)。您可以存储字符串：

localStorage.setItem("key", "value");
// or
localStorage.key = "value";    // See warning below
// or
localStorage["key"] = "value"; // See warning below

(我建议使用setItem方法，而不是直接赋值给localStorage上的属性，这样您就不会与localStorage的任何方法冲突！)

...然后再拿回来，甚至在用户完全离开页面后又回来了：

var x = localStorage.getItem("key");
// or
var x = localStorage.key;    // See warning above
// or
var x = localStorage["key"]; // See warning above
console.log(x); // "value"

如果需要，可以将其删除：

localStorage.removeItem("key");

通常，通过使用某种设置对象并通过将其转换为JSON来存储它，使用JSON存储客户端信息是有意义的：

localStorage.setItem("settings", JSON.stringify(settings));

...并在取回时使用JSON.parse：

var settings = JSON.parse(localStorage.getItem("settings"));
if (!settings) {
    // It wasn't there, set defaults
    settings = {/*...*/};
}