Why doesn't document.ready work in this case?
If I use this:
<script>
$(document).ready(function() {
if (window.localStorage.getItem('createTicket')) {
var createTicketInfo = JSON.parse(window.localStorage.getItem('createTicket'));
}
});
</script
I see an error in the console:
Unprepared ReferenceError: createTicketInfo is undefined
But if I remove document.ready:
<script>
if (window.localStorage.getItem('createTicket')) {
var createTicketInfo = JSON.parse(window.localStorage.getItem('createTicket'));
}
</script>
Everything is good: 
Why?
source to share
This is because in the first example createTicketInfo
only appears in the callback (function) ready
.
function test() {
var boo = "Hi! I'm boo.";
// ...
console.log(boo); // visible here
}
test();
console.log(boo); // not visible here (even if we call test first)
The second example createTicketInfo
does not fit into a function, so it is global (visible everywhere).
if(true) {
if(true) {
if(true) {
var foo = "Hi! I'm foo.";
// ...
console.log(foo); // visible here
}
}
}
console.log(foo); // visible here too (because javascript doesn't have block scopes)
Always remember that javascript has function scopes but does not block scopes.
Note. ... As @nnnnnn mentioned in the comment below, ECMAScript 6 introduced a new way to declare variables using let
or const
that respect block scopes. So:
if(true) {
let zoo = "Hi! I'm zoo.";
// ...
console.log(zoo); // only visible inside this block
}
console.log(zoo); // not visible here
source to share
Something else doesn't fit in another section of your code.
Take a look at this fiddle I created.
It reads and writes the value accurately. Exactly the same code:
https://jsfiddle.net/nxka5h7y/2/
<head>
<script src = "https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script>
window.localStorage.setItem('createTicket', '{"a":"1"}');
$(document).ready(function() {
if (window.localStorage.getItem('createTicket')) {
var createTicketInfo = JSON.parse(window.localStorage.getItem('createTicket'));
console.log(createTicketInfo);
} else { console.log("none"); }
});
</script>
</head>
<body>
<script>
</body>
The only thing I added was actually setting the createTicket element to localStorage to make sure the if if statement inside the document / ready gets through.
My semi-logical guess is that the JSON stored in createTicket is malformed based on how it was set (which is not shown in your example.) I really don't think that's the problem. But, actually, your example gives exact results in jFiddle. Look elsewhere in your code. For example, the part where you actually set createTicket. Or that your jQuery is really included or something silly.
source to share