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 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 = {/*...*/};
}

Answer 2

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

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

使用AJAX请求一些数据，cookie将包含在请求中。
导航到新页面时，Cookie将包含在请求中。

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

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

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

还有一件事，就是你所说的，似乎你打算存储用户在游戏中的进展。请注意，用户可以访问 Cookie和本地存储。因此，如果他们愿意，他们可以篡改这些数据。

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

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

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

Cookies或localstorage是最好的方法吗？

2 个答案: