在本地存儲器中保存動態創建的列表框

我在「源」列表框中製作了一個可能映射位置列表的Google地圖。你可以選擇你想要的多少，然後按一個按鈕，然後他們進入下一個列表框。一旦你按下「地圖位置」按鈕，他們都會被映射。我試過並失敗了，以獲得動態列出的所需位置，使用本地存儲進行保存和調用，因此當用戶返回頁面時，他們的最後位置仍然存在。這對使用iPad和其他平板電腦的人來說很重要。有人可以幫助獲取保存在列表框中的動態創建的選項嗎？我讀過很多關於本地存儲的文章，但這似乎是一個獨特的情況。在本地存儲器中保存動態創建的列表框

<!DOCTYPE html> 
<html> 
    <head> 
     <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 
     <script type='text/javascript' src='http://code.jquery.com/jquery-1.9.1.js'></script> 
     <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>  

     <style type='text/css'> 
      #map-canvas { width:940px; height:625px; } 
      .layer-wizard-search-label { font-family: sans-serif }; 

     </style> 
     <script type='text/javascript'>//<![CDATA[ 
      var map; 
      var layer_0; 
      var destSelect; 
      var filter; 

      function initialize() { 
      map = new google.maps.Map(document.getElementById('map-canvas'), { 
       center: new google.maps.LatLng(47.724544549099676, -100.43701171875), 
        scaleControl: true, 
        zoom: 7, //zoom 
        zoomControl: true, 
          zoomControlOptions: { 
          style: google.maps.ZoomControlStyle.LARGE, 
          position: google.maps.ControlPosition.TOP_LEFT}, 
        mapTypeId: google.maps.MapTypeId.ROADMAP //the map style 
      }); 

      layer_0 = new google.maps.FusionTablesLayer({ 
       map: map 
      }); 
      ///Storage 
      filter = document.getElementById("filter"); 
      destSelect = document.getElementById("destSelect"); 

      if (localStorage.locations) 
       destSelect.value = localStorage.locations; 

      } 

      function saveChoice() { 
       localStorage.locations=destSelect.value;  
       console.log + localStorage.locations; 
      } 
      /// 
      function changeMap_0() { 
       var query={ 
        select: "'geometry'", 
        from: "1xDlCWWj4WMCadzaua5bBss3UNLprGCnsS3H4vt0" 
       }, 
       values=[], 
       options=document.getElementById('destSelect').options; 

       if(!options.length){ 
        //no options added, remove the layer 
        //and leave the function 
        layer_0.setMap(null); 
        return; 
       } 

       //collect the values 
       for(var i =0;i<options.length;++i){ 
        values.push(options[i].value.replace(/'/g, "\\'")); 
       } 
       //create where-clause 
       query.where="'Well Name' IN('"+values.join("','")+"')"; 

       //set the options 
       layer_0.setOptions({query:query,map:map}); 
      } 
      function listboxMoveacross(sourceID, destID) { 
       var src = document.getElementById(sourceID); 
       var dest = document.getElementById(destID); 

       for(var count=0; count < src.options.length; count++) { 

        if(src.options[count].selected == true) { 
          var option = src.options[count]; 
          var newOption = document.createElement("option"); 
          newOption.value = option.value; 
          newOption.text = option.text; 
          newOption.selected = true; 
          try { 
            dest.add(newOption, null); //Standard 
            src.remove(count, null); 
          }catch(error) { 
            dest.add(newOption); // IE only 
            src.remove(count); 
          } 
          count--; 
        } 
       } 
      } 
      google.maps.event.addDomListener(window, 'load', initialize) 
     </script> 


    </head> 
    <body> 
     <div id="map-canvas"></div> 
     <table> 
      <tbody> 
       <tr> 
        <td> 
         <select id="filter" multiple="1"> 
          <option value="101 FEDERAL 21X-24">101 FEDERAL 21X-24</option> 
          <option value="13 MILE SWD 1">13 MILE SWD 1</option> 
          <option value="2-BRENDEN 9-33 1-M">2-BRENDEN 9-33 1-M</option> 
          <option value="20002 JV-P AGATE  1">20002 JV-P AGATE  1</option> 
          <option value="20002 JV-P AGATE  2">20002 JV-P AGATE  2</option> 
         </select> 

        </td> 
        <td> 
         <button onclick="listboxMoveacross('filter', 'destSelect');">&gt;&gt;</button> <br> 
         <button onclick="listboxMoveacross('destSelect', 'filter');">&lt;&lt;</button> 
        </td> 
        <td> 
         <select id="destSelect" size="10" multiple="" onchange="saveChoice()"> 
         </select> 
        </td> 
       </tr> 

      </tbody> 
     </table> 
     <button id="mapbutton" onClick="changeMap_0(map);">Map Locations</button> 
    </body> 
</html>

來源

2014-01-29 user1871068

將位置從左側移至右側時不會發生任何情況。當'dest.add（newOption，null）;'完成時，'onchange'事件不會被觸發。您必須「手動」調度事件，或者取消選擇並選擇相同的位置以觸發更改事件。現在'saveChoice（）'沒有被調用。 –

您有雙重實例listboxMoveacross() - 爲什麼？正如@AntoJurković所說，onchange上沒有任何事情發生。相反

在每次修改
上initialize()時間保存所有的項目從destSelect，加載列表，將它們添加到destSelect和filter刪除它們。

保存到存儲，調用你的listboxMoveacross()：

function saveToStorage() { 
    var destSelect=document.getElementById("destSelect"); 
    for (var i=0;i<destSelect.length;i++) { 
     localStorage.setItem('option_'+i, destSelect.options[i].text); 
    } 
}

檢索存儲的選項initalize()和刪除存儲選項從filter：

function loadFromStorage() { 
    var destSelect=document.getElementById("destSelect"); 
    var filter = document.getElementById("filter"); 
    var filterOut = []; 
    for (var i=0;i<filter.length;i++) { 
     var storedOption=localStorage.getItem('option_'+i); 
     if (storedOption != 'null' && storedOption != null) { 
      var option = document.createElement('option'); 
      option.value = storedOption; 
      option.innerHTML = storedOption; 
      destSelect.appendChild(option); 
      filterOut.push(option); 
     } 
    } 
    //remove stored options from filter 
    for (var i=filter.length;i>=0;i--) { 
     for (var t=0;t<filterOut.length;t++) { 
      if (filter.options[i]!=undefined) { 
       if (filter.options[i].text.localeCompare(filterOut[t].text)==0) { 
        filter.removeChild(filter[i]); 
       } 
      } 
     } 
    } 
}

看到撥弄你的代碼上方我的補充 - >http://jsfiddle.net/3AHwz/ 添加一些值到destSelect，然後重新加載。

來源

2014-01-29 21:06:59 davidkonrad

謝謝。是的，'listboxMoveacross（）'是一個錯字。我已經移動它，忘記刪除。然而，按照您的說法，重新加載時選項已成功保存，對您而言，我預料到可以在重新加載之後按下「地圖位置」按鈕來映射這些選項。這仍然是可能的嗎？還有一種方法可以刪除保存的數據？ – user1871068

@ user1871068，我不完全理解第一個「push map locations button ..」，在'loadFromStorage（）'後面調用'changeMap_0（）'。但是 - 是的 - 我忘記了，每次更改localStorage之後再保存'destSelect'的內容 - 只需'localStorage.clear（）;' – davidkonrad

目標是讓用戶遠離頁面，然後返回時，在地圖畫布上有相同的位置。因此，在這種情況下，當用戶返回時，他們將在列表框中看到這些位置，理想情況下只需按「地圖位置」按鈕即可將這些標記返回。 – user1871068

在本地存儲器中保存動態創建的列表框

回答

相關問題