How to store a value in javascript array permanentaly online or in js file in windows?

Question

<!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!

Here is a sample input link for you to put and test my program: http://d333nxgwiep04o.cloudfront.net/qa/attachments/2018/2/28/23/3389645/aad8cfc474fbe8bf117e317781b1a9a6.jpg — Alpha Geek, Mar 01 '18 at 15:53
I can save this html file either online or on my windows. Just need help on how to store value permanentaly. Thanks! — Alpha Geek, Mar 01 '18 at 15:56
*starts from beginning* this is the expected behavior, you refreshed the page, so all things related to page will be reseted... if you want to keep values you'll need a database or will need to store a local or session storage. — Calvin Nunes, Mar 01 '18 at 16:03

Calvin Nunes · Accepted Answer · 2018-03-01T17:14:02.893

0

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)

edited Mar 01 '18 at 17:14

answered Mar 01 '18 at 16:09

Calvin Nunes

6,376
4
20
48

Mr. Calvin, never mind but I'm new to this i.e Json object. Can you provide the complete code and directions. – Alpha Geek Mar 01 '18 at 16:53
take a look here to learn a little bit about JSON: https://www.w3schools.com/js/js_json_objects.asp – Calvin Nunes Mar 01 '18 at 17:11
there's no complete code, my answer have all the code needed to save an object to the localstorage (https://www.w3schools.com/html/html5_webstorage.asp)... follow the steps I said there, and once you call `localStorage.setItem();` you'll be able to see the object in the browser developer tools under the Application tab (press F12 to access dev tools in browser) – Calvin Nunes Mar 01 '18 at 17:12
Alright I get it. Just last question. Where is data being stored and in which format (I guess text file). I guess in the chrome folder in the C: drive in which windows is installed. What if I format my hard drive C:? Please correctify me! – Alpha Geek Mar 01 '18 at 17:30
look here: https://stackoverflow.com/questions/8634058/where-the-sessionstorage-and-localstorage-stored – Calvin Nunes Mar 01 '18 at 17:34
and if you think my answer helped and you can use it, please, mark as accepted if you want. Thanks – Calvin Nunes Mar 01 '18 at 17:34
More than helpful :) Thanks! – Alpha Geek Mar 01 '18 at 17:48

How to store a value in javascript array permanentaly online or in js file in windows?

1 Answers1