在本地存储中保存动态创建的列表框

Question

我在“来源”列表框中制作了一张 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>

Answer 1

您有两个listboxMoveacross() 实例 - 为什么？作为@Anto Jurković cmets，onchange 不会发生任何事情。而是

1. 每次修改时保存destSelect中的所有项目
2. 在initialize() 上，加载列表，将它们添加到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 添加一些值，然后重新加载。