title: Store and retrieve the dynamically populated drop-down list in a localStorage
body: <p>I have a drop down list which is populated dynamically. I send some ajax request and get response and based on a condition the drop-down is populated.
  Now I need to store these populated list in localStorage as I will need to display the values which were populated previously on page refresh.</p>
  
  <p>Everything works fine except that I am getting only the last value populated in the drop-down list. Not all the values which were populated previously. I need to retrieve all the values which were populated previously. </p>
  
  <p><strong>index.jsp</strong></p>
  
  <pre><code>&lt;input type="radio" class="radioButton" value="Display all" checked onclick="fnCheck();"&gt; Display All
  
  &lt;input type="radio" class="radioButton" value="Display Divisions" onclick="fnCheck();"&gt; Display Divisions
  
  
      &lt;input type="radio" class="radioButton" value="Display Data" onclick="fnCheck();"&gt; Display Data 
      &lt;select id="convoy_list"&gt;
      &lt;option&gt;Values&lt;/option&gt;
      &lt;/select&gt;
      &lt;input type="button" id="testbtn" value="Test" onclick="fnClickTest();" &gt;
      &lt;input type="button" id="ok" value="OK" onclick="fnOK();" &gt;
      &lt;input type="button" id="Refresh" value="Refresh" onclick="fnDisplay();" 
  </code></pre>
  
  <p><strong>myjs.js</strong></p>
  
  <pre><code>function test(){
      $.ajax({
      //some requests and data sent
      //get the response back
  
      success:function(responsedata){
          for(i=0;i&lt;responsedata.data;i++):
          {
              var unitID=//some value from the ajax response
              if(somecondition)
              {
                  var select=$(#convoy_list);
                  $('&lt;option&gt;').text(unitID).appendTo(select);
                  var conArr=[];
                  conArr=unitID;
                  test=JSON.stringify(conArr);
                  localStorage.setItem("test",test);
              }
          }
      }
      });
  }
  </code></pre>
  
  <p>In another function say display() i try retrieving the localStorage values</p>
  
  <pre><code>    function display(){
      if(localStorage.getItem("test")){
      var listId=$(JSON.parse(localStorage.getItem("test")));
      var select=$(#convoy_list);
          $('&lt;option&gt;').text(listId).appendTo(select);
  
      }
  </code></pre>
  
  <p>Here if the data populated in the drop down list is C1 C2 and C3 for an instance. After i refresh the page only C3 is populated in the drop-down . I want all the values ie C1,C2,C3 to be populated back after refresh. How can I achieve this?</p>