javascript - 尝试在多个页面的下拉菜单中保留用户选择

Question

因此，我为知识管理页面编写了一个脚本，允许用户从下拉菜单中的状态列表中进行选择，并且页面上的内容根据所选状态进行定制。

<script type="text/javascript">
$(document).ready(function(){
    $("select").change(function(){
        $( "select option:selected").each(function(){
            if($(this).attr("value")=="Arizona"){
                $(".box").hide();
                $(".Arizona").show();
            }
            if($(this).attr("value")=="Arkansas"){
                $(".box").hide();
                $(".Arkansas").show();
            }
        });
    }).change();
});
</script>

等等...大约 22 个州。我需要它做的是保留用户在域内页面之间的选择。到目前为止我尝试过的:

localStorage.setItem("state", "Arizona");
localStorage.getItem('state');

我对 JS 相当陌生，并且在使其正常工作时遇到问题。看起来并没有保留值(value)。理想情况下，我需要有 2 个版本，一种使用本地存储，一种使用 session 存储，因为我们有具有不同需求的内部和外部客户。

非常感谢任何帮助。

Answer 1

我会仔细研究 localStorage API。每当将新项目添加到存储中时就会触发一个事件:https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API

话虽这么说，在离线/在线模式下跨多个客户端的浏览器状态管理和动态更新并不是一个微不足道的“在这里让我编写一个脚本”问题。

完整的解决方案可能包括用于服务器通信的 Websockets 以及充当客户端状态管理器的数据库或内存缓存。