Why is it logging the wrong item?

I am trying to capture keystrokes of users, then put it in localStorage. But the last function test() is not working properly. It is logging data2 instead of data5. After I reload and the script is loaded again, it is loading data5. But I wan't to instantly log data5. Maybe someone knows why!

window.onload = function () { // CHECK JQUERY EXISTENCE
if (window.jQuery) {
abc();
} else {
script = document.createElement("script");
script.onload = abc;
script.src = "https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js";
document.head.appendChild(script);
}
};
function abc() { // CAPTURE KEYSTROKES
test = "";
test2 = "";
test3 = "";
test4 = "";
check = localStorage.getItem("test");
check2 = localStorage.getItem("test2");
check3 = localStorage.getItem("test3");
check4 = localStorage.getItem("test4");
if (check == null) { // EXECUTE IF CHECK (HOLDING TEST VALUE) IS EMPTY
data = "";
$(document).keypress(function (e) {
data += e.key;
localStorage.setItem("test", data);
});
} else if (check2 == null){ // EXECUTE IF CHECK2 (HOLDING TEST2 VALUE) IS EMPTY
data2 = localStorage.getItem("test");
$(document).keypress(function (e) {
data2 += e.key;
localStorage.setItem("test2", data2);
});
} else if (check3 == null){ // EXECUTE IF CHECK3 (HOLDING TEST3 VALUE) IS EMPTY
data3 = localStorage.getItem("test2");
$(document).keypress(function (e) {
data3 += e.key;
localStorage.setItem("test3", data3);
});
} else if (check4 == null){ // EXECUTE IF CHECK4 (HOLDING TEST4 VALUE) IS EMPTY
data4 = localStorage.getItem("test3");
$(document).keypress(function (e) {
data4 += e.key;
localStorage.setItem("test4", data4);
data5 = localStorage.getItem("test4");
});
}
}
function test() { // VALIDATE lOCALSTORAGE ITEMS FOR CONTEXT
data2 = localStorage.getItem("test");
data3 = localStorage.getItem("test2");
data4 = localStorage.getItem("test3");
data5 = localStorage.getItem("test4");
if (data2 || data3 || data4 || data5 != null) {
if (data2 != null && data3 && data4 && data5 == null) {
console.log(data2);
} else if (data3 != null && data4 && data5 == null) {
console.log(data3);
} else if (data4 != null && data5 == null) {
console.log(data4);
} else if (data5 != null) {
console.log(data5); // HITS WHEN RELOADED
}
} else {
return;
}
}
test();

The solution is much simpler than your approach. 2 simple lines of code will do it. Upon each keystroke, append that key to your localStorage value.

The following won't work here in Stack Overflow because of sandboxing, but a working example can be seen at this Fiddle.

Also, note that keypress is a deprecated event and doesn't fire for non-printable characters. You should use keydown instead.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

$(document).on("keydown", function(event){
// This code will concatenate the last key pressed with a string
// of characters already present in localStorage. If nothing
// is in localStorage, then this code will create a fresh string.
let storageChars = localStorage["chars"] ? localStorage.getItem("chars") : "";
localStorage.setItem("chars", storageChars + event.key);
// Then, you can extract/examine the characters in the string in many ways,
// like looping over the string, turning the string into an array, indexing 
// the string, etc.
});

<!-- language: lang-html -->

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- end snippet -->

From your other logic, it looks like you only want to log data2 if it's not null and the others are null. In that case, you want to compare each value to null in your conditional.

e.g. data2 !== null && data3 === null && data4 === null && data5 === null

If you don't compare to null, you're just testing for a "truthy" value (values that are not false, 0, 0n, "", null, undefined, or NaN. See: https://developer.mozilla.org/en-US/docs/Glossary/Truthy).

Additionally, it looks like you may be trying to compare each of the values to null in this conditional: if (data2 || data3 || data4 || data5 != null). If so, you'll want to code it as if (data2 !== null || data3 !== null || data4 !== null || data5 !== null).

You may also find this helpful: https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/conditionals#Logical_operators_AND_OR_and_NOT