title: On Refresh, newly added element in array is removed from the array list itself
body: <p>When ever I add new element in an array, it gets added successfully but when I refresh the browser, the added element gets removed from the list itself. here is my code snippet.</p>
  
  <pre><code>&lt;html&gt; 
      &lt;label&gt;Enter an New item to add in Stock&lt;/label&gt; &lt;br&gt; &lt;/br&gt; 
      &lt;input type="text" name=" itemName" id="addItemInStock&gt;&lt;br&gt;&lt;/br&gt;
      &lt;p id="errorMsg"&gt;&lt;/p&gt; 
      &lt;button onclick="addToStock()" return="false"&gt;Add&lt;/button&gt;
      &lt;p id="showList"&gt;&lt;/p&gt; 
      &lt;select id="showInDropDown"&gt;
          &lt;option value="" disabled selected style="display: block;"&gt;Stock Items&lt;/option&gt;
      &lt;/select&gt;
  
  &lt;script&gt;
      var fruits = ["Banana", "Orange", "Apple", "Mango"];
      document.getElementById("showList").innerHTML = fruits;
      var newItem = document.getElementById("addItemInStock");
  
      function addToStock(){
          if ((newItem.value) === ""){
              document.getElementById("errorMsg").innerHTML = "Blank item cannot be added!!";
              document.getElementById("errorMsg").style.display = "block";
          }
          else{
              document.getElementById("errorMsg").style.display = "none";
              fruits.push(newItem.value);
              document.getElementById("showList").innerHTML = fruits;
              clearAndShow();
          }
          var sel = document.getElementById("showInDropDown");
          document.getElementById("showInDropDown").innerHTML = "";
          for (var i = 0; i &lt; fruits.length; i++)
          {
              var opt = document.createElement('option');
              sel.appendChild(opt);
          }
      }
  
      function clearAndShow(){
          newItem.value = "";
      }
  &lt;/script&gt;
  
  &lt;/html&gt;
  </code></pre>