<!DOCTYPE html>
<html>
<head>
<style>
body {
}
#review {
font-size: 60px;
}
#added {
font-size: 60px;
}
</style>
</head>
<body>
<input type="text" id="myText">
<button class="firstone" onclick="google()">Student Record</button>
<button class="secondone" onclick="addthis()">Add Student</button>
<p id="review"><p>
<p id="added"><p>
<script type="text/javascript">
var superfile = [];
function lengthfill(val){
return val.length>4;
}
function numfill(give){
return !isNaN(give);
}
function google(){
var str = document.getElementById("myText").value;
var arr = str.split("/");
arr = arr.filter(lengthfill);
arr = arr.filter(numfill);
var junk = "Caution: This Student Will Rate You Low, lol :)";
var funk = "Hoorah! Good To Go With This Student :)";
if (str.includes("/") && arr.length==0){
document.getElementById("review").innerHTML = "Sorry! This is Not a Valid URL :)";
}
else if (superfile.length==0){
document.getElementById("review").innerHTML = "Yay! No Record Found :)";
}
else if (superfile.includes(arr[0])){
document.getElementById("review").innerHTML = junk;
}
else {
document.getElementById("review").innerHTML = funk;
}
}
function addthis(){
var str = document.getElementById("myText").value;
var arra = str.split("/");
arra = arra.filter(lengthfill);
arra = arra.filter(numfill);
var funky = "Wow! Student Already Black-Listed :)";
var junky = "Boom! Student Black-Listed :)";
if (superfile.includes(arra[0]) && arra.length!==0){
document.getElementById("review").innerHTML=funky;
}
else if (str.includes("/") && arra.length!==0) {
document.getElementById("review").innerHTML=junky;
superfile.push(arra[0]);
}
else {
document.getElementById("review").innerHTML="Sorry! This is Not a Valid URL :)";
}
}
</script>
</body>
</html>
What I am trying to do is input a url and extract a specific part of url. Then if a certain condition is met the extracted part is pushed in the superfile array located at the beginning of the js code. The condition for push array is located in the last else if statment in the end of js code.
My goal is to store the value permanentaly in the superfile array once I hit the add student button. The only problem I am facing now is that, whenever I refresh the page, the superfile array starts from beginning i.e empty.
Thanks!
As I said in the comments, it's a normal behavior to a variable be reseted when the page is refreshed, you can't avoid that.
Or you use a database to store values and then assign the value to the variable Or you can maybe store to the localstorage, transforming your array into a JSON object.
After clicking in the Add Student button (inside the function to add), call this to store in the localStorage:
localStorage.setItem('ItemName', JSON.stringify(superfile));
And when you want to load or set the values of superfile from the already stored object, you use:
var superfileJson = localStorage.getItem('ItemName');
this will return a JSON object, to use it as an normal array, do JSON.parse(superfileJson)