Question

我有一个简单的下拉列表，其中包含与这些名称相关的名称和图片。我想使用本地存储在刷新页面后将所选名称和照片保留在屏幕上。不确定定位这些变量的最佳方法，以便本地存储可以帮助我保存所选的＆＃34;驱动程序＆＃34;为了这一天。

这是我的代码......

<script type="text/javascript">
        var linkData = [
            ['Images/mark.jpg'],
            ['Images/chad.jpg'],
            ['Images/jeff.jpg']
        ]
        //preload the pics
        var picO = new Array();
        for(i=0; i < linkData.length; i++){
            picO[i] = new Image();
            picO[i].src = linkData[i][0];
        }
        function show(val) {
            document.getElementById('picture').src = picO[val-1].src;
            document.getElementById('caption').href = linkData[val-1][1];
        }
        window.onload=function(){
            show(1);
        }
    </script>

    <div>
        <select id="driver" onchange="show(this.value);">
            <option value="1">Mark</option>
            <option value="2">Chad</option>
            <option value="3">Jeff</option>
        </select>
        <br/>
        <a id="caption" href="#"><img id="picture" src="" /></a>
    </div>

    <div>
      <input type="button" value="Confirm Driver" onclick="save()"/>
    </div>
    <script>
        function save() {
          var todaysDriver = document.getElementById('driver').value;
          localStorage.setItem('driver',todaysDriver);
        }

    </script>

Answer 1

这就是你可以继续的方式。您只需要修改onload事件。

window.onload=function(){
        var selectedDriver = localStorage.getItem('driver');
        if(selectedDriver === null){
            selectedDriver = 1 ;
        }
        document.getElementById('driver').selectedIndex = selectedDriver - 1;
        show(selectedDriver);
}

此外，如果必须在当天保存，您还需要将localSaved存储在localStorage中，并在显示之前将当前日期与此进行比较。

此外，您可能希望下载更改而不是预取

下载图片

刷新后使用本地存储将名称和图片保留在屏幕上（F5）

1 个答案: