On Refresh, newly added element in array is removed from the array list itself

Question

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.

<html> 
    <label>Enter an New item to add in Stock</label> <br> </br> 
    <input type="text" name=" itemName" id="addItemInStock><br></br>
    <p id="errorMsg"></p> 
    <button onclick="addToStock()" return="false">Add</button>
    <p id="showList"></p> 
    <select id="showInDropDown">
        <option value="" disabled selected style="display: block;">Stock Items</option>
    </select>

<script>
    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 < fruits.length; i++)
        {
            var opt = document.createElement('option');
            sel.appendChild(opt);
        }
    }

    function clearAndShow(){
        newItem.value = "";
    }
</script>

</html>

Because on refresh, page is repainted. If you need to save the list then you need to use some web storage i.e. localStorage, web storage, etc. — Nikhil Aggarwal, Nov 17 '16 at 06:09
Can you please explain what does it mean by web storage..you mean local DB? — Prasad_Joshi, Nov 17 '16 at 06:10

Nikhil Aggarwal · Accepted Answer · 2016-11-17T06:25:06.080

2

Because on refresh, page is repainted. If you need to save the list then you need to use some web storage i.e. localStorage, web storage, etc.

Following is a simple use case of localStorage

Update from

var fruits = ["Banana", "Orange", "Apple", "Mango"];

to

var fruitsfromLS = localStorage.getItem("fruits");
var fruits = fruitsfromLS ? JSON.parse(fruitsfromLS) : ["Banana", "Orange", "Apple", "Mango"];

and update

fruits.push(newItem.value);

to

fruits.push(newItem.value);
localStorage.setItem("fruits", JSON.stringify(fruits));

For reference, localStorage

edited Nov 17 '16 at 06:25

answered Nov 17 '16 at 06:18

Nikhil Aggarwal

28,197
4
43
59

@Prasad_Joshi - You have a missing quote in your html element with id addItemInStock. Here it works in your case too - http://plnkr.co/edit/tYQZyMrxvCDaoEswpHMs?p=preview – Nikhil Aggarwal Nov 17 '16 at 06:33
yah it works on chrome but not on Mozilla browser version 49.0.2.. thanks for the help anyways. – Prasad_Joshi Nov 17 '16 at 07:06
@Prasad_Joshi - It works in Mozilla too same version :) Anyways, you try some tweaks and bingo :) – Nikhil Aggarwal Nov 17 '16 at 07:07
1

Glad!!! after clearing browser history it woks fine for me too!! don't know why it stuck before. – Prasad_Joshi Nov 17 '16 at 07:13

score 0 · Answer 2 · answered Nov 17 '16 at 06:10

0

If you want to retain the values even after the refresh of a web browser use local storage. https://developer.mozilla.org/en-US/docs/Web/API/Storage/LocalStorage

answered Nov 17 '16 at 06:10

Ashok kumar

544
1
5
21

score 0 · Answer 3 · edited May 23 '17 at 10:30

0

That is because value added in array are session specific, so they are deleted on page load. You can you LOCAL STORAGE to fix this. Refer this link: Storing Objects in HTML5 localStorage

edited May 23 '17 at 10:30

Community

1
1

answered Nov 17 '16 at 06:23

Tejas

239
1
2
6

On Refresh, newly added element in array is removed from the array list itself

3 Answers3