javascript - 在 jquery 中点击后退按钮后，删除的内容被替换回来

Question

我有两列，在单击下一步按钮后，我会将选定的字段从一列移动到另一列，如果我回来，所有移动的字段都会出现。

图 1 显示了点击下一步按钮之前的情况。(工作正常)

图 2 在点击下一步按钮并返回第一页后显示

Column 1 HTMl

<div class="menu">
    <select multiple="multiple" id='lstBox1' >
</select>

Column 1 JS code

self.firmData.forEach(function (data) {             
 $("#lstBox1").append($('<option class="items">').text(data.DisplayName).attr('value', data.DisplayName));                        
  });

2nd column HTML

<div class="menu">
    <select multiple="multiple" id='lstBox2' >
</select>

2nd column JS code

self.data.forEach(function (data) { 
$("#lstBox2").append($('<option class="items">').text(data.columnsexpo).attr('value', data.columnsexpo));
 });

注意

self.data 和 self.firmData 值来自 api

Answer 1

您可以简单地使用 localStorage 将所选项目保存在缓存中。

这里是完整的 fiddle 链接。 https://codesandbox.io/s/ly1l9x7no9

这是来自那个 fiddle 的工作演示。 https://ly1l9x7no9.codesandbox.io/

刷新页面，一旦您在左右框之间移动项目以检查所选项目是否保留在相同的框内。