Cookies 或 localstorage 是最好的方法？

Question

我有一些 javascript，其中我需要 cookie 或 localstorage 以确保变量不会丢失。 我是初学者，我不确定哪个最好用，但我知道两者都做同样的事情。 基本上，我需要存储 javascript 所做的任何事情，即使用户注销/登录，在任何天数之间，这仍然会被保存。

有人可以帮忙吗？

<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>

Answer 1

我不确定哪个最好用，但我知道两者的作用是一样的。

不是真的。 Cookie 和本地存储的主要区别在于，Cookie 将与您发出的每个服务器请求一起发送。^[1]

• 使用 AJAX 请求一些数据，cookie 将包含在请求中。

• 导航到新页面，cookie 将包含在请求中。

因此，缺点是每次发出请求时都会向服务器传输额外的数据。如果您将大量数据存储到 cookie 中，则更是如此。

本地存储仅保留在浏览器中（直到您明确清除它），但它不会随每个请求一起发送。

决定很简单，如果您需要通过请求参数向服务器提供数据，您应该使用 cookie，否则使用本地存储。

---

还有一件事，从您所说的来看，您似乎打算将用户的进度存储在游戏中。请记住，用户可以访问 cookie 和本地存储。因此，他们可以根据需要篡改这些数据。

如果防止用户更改数据至关重要，则必须将数据存储在服务器上。

请阅读：JavaScript: client-side vs. server-side validation

---

^{[1]。 HTTP2 可能并不完全正确，但这是一个不同的话题。}

Answer 2

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

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

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

对于您的用例，网络存储将是正确的选择，因为您只需要客户端的信息。它还具有合理的 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 = {/*...*/};
}