Javascript 下拉菜单保存重新加载时的选项

我需要创建弹出式语言下拉菜单与国家名称，国旗和链接到该网站的语言版本。在用户选择菜单项之后-它应该将您带到所需的url（页面的语言版本），并且此选项应该在新页面上保持可见（重新加载后）。 菜单示例-（）

下面是我试图创建的示例：

https://jsfiddle.net/Okean/8x0atLpy/62/

<ul class="list-unstyled" id="select-lang">
    <li class="init">[SELECT]</li>
    <li data-value="value 1"> <a href="#"> <img src="https://image.flaticon.com/icons/svg/197/197615.svg"> Language 1 </a> </li>
    <li data-value="value 2"> <a href="#"> <img src="https://image.flaticon.com/icons/svg/197/197386.svg">Language 2 </a> </li>
    <li data-value="value 3"> <a href="#"> <img src="https://image.flaticon.com/icons/svg/197/197484.svg">Language 3 </a> </li>
    <li data-value="value 4"> <a href="#"> <img src="https://image.flaticon.com/icons/svg/197/197380.svg">Language 4 </a> </li>
</ul>

$("ul").on("click", ".init", function() {
    $(this).closest("ul").children('li:not(.init)').toggle();
});

var allOptions = $("ul").children('li:not(.init)');
$("ul").on("click", "li:not(.init)", function() {
    allOptions.removeClass('selected');
    $(this).addClass('selected');
    $("ul").children('.init').html($(this).html());
    allOptions.toggle();
});



window.onload = function() {
    var selItem = sessionStorage.getItem("SelItem");  
    $('#select-lang').val(selItem);
    }
    $('#select-lang').change(function() { 
        var selVal = $(this).val();
        sessionStorage.setItem("SelItem", selVal);
    });

body{
  padding:30px;
}
ul { 
    height: 30px;
    width: 150px;
    border: 1px #000 solid;
}
ul li { padding: 5px 10px; z-index: 2; }
ul li:not(.init) { float: left; width: 130px; display: none; background: #ddd; }
ul li:not(.init):hover, ul li.selected:not(.init) { background: #09f; }
li.init { cursor: pointer; }

a#submit { z-index: 1; }

li img {
  width: 20px;
}

[选择]





$（“ul”）。在（“click”，“.init”，function（）上{
$（this）.closest（“ul”）.children（'li:not（.init'））.toggle（）；
});
var allOptions=$（“ul”）.children（'li:not（.init'）；
$（“ul”）。在（“单击”，“li:not（.init）”，函数（）上{
allOptions.removeClass（'selected'）；
$（this.addClass（'selected'）；
$（“ul”）.children（'.init'）.html（$（this.html（））；
toggle（）；
});
window.onload=函数（）{
var selfitem=sessionStorage.getItem（“selfitem”）；
$（'#select lang'）.val（selItem）；
}
$（'#select lang'）。更改（函数（）{
var selVal=$（this.val（）；
sessionStorage.setItem（“SelItem”，selVal）；
});
身体{
填充：30px；
}
ul{
高度：30px；
宽度：150px；
边框：1px#000实心；
}
ul li{填充：5px 10px；z索引：2；}
ul li:not（.init）{float:left；宽度：130px；显示：无；背景：#ddd；}
ul-li:not（.init）：悬停，ul-li.selected:not（.init）{background:#09f；}
li.init{cursor:pointer；}
a#提交{z-索引：1；}
李英明{
宽度：20px；
}

您可以使用本地存储。一旦用户选择了一个选项，您可以将其保存到浏览器的本地存储中，其中“语言”是您的密钥，您可以将其命名为任何名称，其中“selectedOption”是用户选择的语言

//设置首选项
window.localStorage.setItem（“语言”，选择选项）；
//设置后，您可以随时获取首选项
window.localStorage.getItem（“语言”）

如果您希望在重新加载之间保留某些内容，则需要将信息保存在某个位置。因此，您可以将所选语言保存在服务器上的会话中，或浏览器上的本地存储之类的内容中。你对此做过任何研究吗？