Using localstorage inside Jquery done method

Question

I want to set a localstorage inside .done method when user's answer is correct. Then i want to get that local storage object and use that outside of the done method. How is that possible? Below is what i am trying without success.

data.color is a string

$.ajax({
    type: "POST",
    url: "validation.php",
    dataType: "json",
    data: $("input").serialize(),
}).done(function(data) {
 if (data.answer) { //if answer is correct
 localStorage.setItem("ColorStorage", data.color); //set a local storage with the variable data.color
    }
});

//outside of ajax
if (localStorage.getItem("ColorStorage") > 1)
    $("#result").append(localStorage.getItem("ColorStorage"));

Where are you having the trouble ? setting or getting ? To inspect it can you put `debugger;`s before your set and get and debug it ? — Doruk, Apr 15 '18 at 14:58
It's possible to get the value of locaStorage anywhere in the window because it's an object of window itself which keeps your data even after closing your browser. — Deepak, Apr 15 '18 at 15:01
Possible duplicate of [How do I return the response from an asynchronous call?](https://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call) — Louys Patrice Bessette, Apr 15 '18 at 15:05
@GragasIncoming See my answer below. To always be sure that the localStorage item is set. You need to do it inside the ajax callback function. If you don't you can never be sure that the ajax call has returned and triggered the callback function that sets your localStorage. Chaining `.done` functions can provide a solution in this case. — Michelangelo, Apr 15 '18 at 15:09
If data.color is string localStorage.getItem("ColorStorage") > 1 is not valid status. So remove >1 from the statement — janith1024, Apr 15 '18 at 15:11
so i should use `localStorage.getItem("ColorStorage").length > 1` — , Apr 15 '18 at 15:13

Asons · Accepted Answer · 2018-04-15T15:19:19.417

The returned value from localStorage.getItem("ColorStorage") is a String, so compare it with e.g. a number like > 1 won't work.

You can e.g. omit the > 1 and it will return true if the item exist.

if (localStorage.getItem("ColorStorage"))  {

}

You can of course also check its length, though after you made sure it exists, or else you will get an error if it doesn't.

if (localStorage.getItem("ColorStorage") && localStorage.getItem("ColorStorage").length > 1)  {

}

Also do note, if you make that call before the AJAX call is done, the item won't exist, though with the above code sample it won't result in a runtime error.

yeah that was my issue. Now it works fine outside of Ajax. I can see that object from the browser application tab — , Apr 15 '18 at 15:19

Michelangelo · Answer 2 · 2018-04-15T15:14:13.353

0

You can chain .done and wait until the item is set:

$.ajax({
    type: "POST",
    url: "validation.php",
    dataType: "json",
    data: $("input").serialize(),
}).done(function(data) {
 if (data.answer) { //if answer is correct
 localStorage.setItem("ColorStorage", data.color); //set a local storage with the variable data.color
    }
}).done(
if (localStorage.getItem("ColorStorage") > 1)
    $("#result").append(localStorage.getItem("ColorStorage"));
);

You need to chain .done functions to make sure that your item is set. If you leave it outside the ajax callback you are not sure if the ajax call has returned and successfully set your localStorage item. You will have to wait for it and then trigger your getItem function.

edited Apr 15 '18 at 15:14

answered Apr 15 '18 at 15:01

Michelangelo

5,888
5
31
50

1

Did you miss _"...and use that outside of the `done` method"_ – Asons Apr 15 '18 at 15:02
@LgSon No, but you can't be sure that when it reaches that line the localstorage item is set. – Michelangelo Apr 15 '18 at 15:04
Exactly, hence your answer is completely wrong and should be focused on that issue instead...if that is the issue OP has, which we still don't know – Asons Apr 15 '18 at 15:05
Which for me makes the answer wrong (not technically though) – Asons Apr 15 '18 at 15:07

Using localstorage inside Jquery done method

2 Answers2