Question

我正在尝试创建一个包含多个下拉列表的表，这些下拉列表具有相同的值但不同的ID，即使在刷新或关闭并再次打开页面后也应该保留值。它必须在没有php或任何服务器端脚本且没有任何插件的本地计算机上运行，因此标准浏览器配置。

我在谷歌搜索了很多，发现： local storage for multiple select option dropdowns 这有助于保留数据，但只要我关闭浏览器并再次加载它。价值观消失了。有人可以帮我解决这个问题吗？提前谢谢。

请求的代码示例：

<select name="1" id="1" class="test">
   <option value="-">-</option>
   <option value="Mike">Mike</option> 
   <option value="Steven">Steven</option> 
   <option value="Sacha">Sacha</option> 
   <option value="Wilfried">Wilfried</option> 
   <option value="Kevin">Kevin</option> 
   <option value="Stefan">Stefan</option> 
   <option value="Koen">Koen</option> 
   <option value="Wasil">Wasil</option> 
</select>
<select name="2" id="2" class="test">
   <option value="-">-</option>
   <option value="Mike">Mike</option>
   <option value="Steven">Steven</option>
   <option value="Sacha">Sacha</option>
   <option value="Wilfried">Wilfried</option>
   <option value="Kevin">Kevin</option>
   <option value="Stefan">Stefan</option>
   <option value="Koen">Koen</option>
   <option value="Wasil">Wasil</option>
 </select>

这是js文件。

 $('.test').change(function() {
      localStorage.setItem(this.id, this.value);
 }).val(function() {
   return localStorage.getItem(this.id)
 });

Answer 1

很好，你添加了一些代码:)我已经测试了你的代码，它确实有效。检查这个小提琴： https://jsfiddle.net/96hrybu2/

您的问题可能是您没有正确绑定元素。

尝试将代码更改为：

       $(document).ready(function(){
            $('.test').change(function() {
              localStorage.setItem(this.id, this.value);
            }).val(function() {
               return localStorage.getItem(this.id)
            });
       });

似乎正在发生的事情是他试图更快地绑定这些元素然后在DOM中呈现它们。

或者您的浏览器不支持localStorage。

如果有帮助，请告诉我。

同时检查你的控制台是否存在某些错误，不要忘记添加jQuery库，但我想你知道：P

干杯。

加载多个下拉列表的本地存储项

1 个答案: