Question: I have a form

```
<input type="text" id='name'>
<input type="text" id='place'>
<button id='add'>Add</button>        
<button id='show'>Show</button>

```

I have a n object to collect the elements when Add button is triggered and the code is 

```
var measure = {};
$("#add").click(function(){
    measurecol = new Object();
    measurecol.name = $("#name").val();
    measurecol.place = $("#place").val();
    measure[measurecol.name] = measurecol;
});

```

Whe I refresh my application, first it shows the elements of the object when no action is performed in the Add button:

```
{ 'foo': { 'name':'foo', 'place': 'foo1' } }

```

But when I fill the form and trigger Add button, the old element in the object gets deleted and the new one is added in the object. This happens only on refreshing the application.

So, my question is how to retrieve the element of the object upon refreshing the application and upon adding an element, it should add with the old one:

```
{
  'foo': {
    'name': 'foo',
    'place': 'foo1'
   },
   'goo': {
     'name': 'goo',
     'place': 'goo1'
   }
}

```

Answer: 
Whenever the click method is executed you are creating a new object

```
measurecol = new Object();

```

which deletes/replaces the previous object. So you loose your previously stored data.

if you don't use var before a variable name it creates a global variable. So you just have one measurecol variable which gets a new value everytime.  

add this 

```
var measurecol = new Object();

```
use [localStorage](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage)

```
var measure = localStorage;
$("#add").click(function(){ 
    measurecol.name = $("#name").val();
    measurecol.place = $("#place").val();
    measure[measurecol.name] = measurecol;
});

```

i think it will work