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

相关文章