Cookie或本地存储是最好的方法？

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

我是一个初学者，我不确定哪个最好用，但是我知道两者确实是一样的东西。

实际上，他们做的事情截然不同。

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

对于您的用例，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 = {/*...*/};
}

Answer 2

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

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

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

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

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

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

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

另一件事，从你所说的来看，你似乎打算存储用户在游戏中的进度。请记住，用户可以访问cookie 和本地存储。因此，如果他们愿意，他们可以篡改这些数据。

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

请阅读：JavaScript：客户端验证与服务器端验证

^{[1]。对于HTTP2来说可能不完全正确，但那是另一个主题了。}