Cookies or localstorage is best way?

Question

I have some javascript, in which i need either cookies or localstorage to ensure variables aren't lost. I'm a beginner and i'm not sure which is best to use, but i know both do sort of the same thing. Basically, i need whatever the javascript is doing to be stored and even when user logs out / logs in, between any amount of days this is still being saved.

Can someone help?

<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

I'm a beginner and i'm not sure which is best to use, but i know both do sort of the same thing.

Actually, they do very different things.

• Cookies are for sending information back and forth between the server and client on every HTTP request.
• Web storage is for storing information in the client (only).

For your use case, web storage would be the right thing to use, since you only want the information client-side. It also has a reasonable API (unlike cookies). You can store a string:

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

(I'd recommend using the setItem method instead of directly assigning to a property on localStorage, so there's no chance of your conflicting with any of localStorage's methods!)

...and get it back later, even in the user left the page entirely and came back:

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"

And remove it if you want:

localStorage.removeItem("key");

Often, it makes sense to use JSON to store your client-side information, by using some kind of settings object and storing it by converting it to JSON:

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

...and using JSON.parse when getting it (back):

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

Answer 2

I'm not sure which is best to use, but I know both do sort of the same thing.

Not really. A key difference in Cookies and Local Storage is that cookies will be sent along with every server request you make.^[1]

• Requesting some data using AJAX, cookies will be included in the request.

• Navigating to a new page, cookies will be included in the request.

So the disadvantage is that you are transferring additional data to the server every time you make a request. More so if you are storing a lot of data into the cookies.

Local storage is merely kept in the browser (until you clear it explicitly), but it is not sent along with every request.

The decision is simple, if you require that data available to the server with request parameters, you should use cookies, else use local storage.

---

One more thing, from what you are saying, it seems like you intend to store the user's progress in a game. Keep in mind that both cookie and local storage are accessible to the user. So they can tamper with that data if they want.

If it is critical to prevent user's from changing the data, you must store the data on the server instead.

Do read: JavaScript: client-side vs. server-side validation

---

^{[1]. This may not be entirely true with HTTP2 but that's a different topic.}