在 cookie/localStorage 中保存并加载完整的 html 选择

Question

之前有关于这个问题的问题，但是我想知道是否可以将html选择的整个配置保存在cookie/localStorage中。通过整个配置，我的意思是当前选择中的所有选项，以及选择了哪个选项。

然后从 cookie 中加载回此配置。

从前面的问题中，我目前使用 onChange 侦听器保存 select 元素，该侦听器保存元素如下：

$('#chosen-url').on("change", function () {
saveToBrowserCookies("settings_select", this);
});
function saveToBrowserCookies(key, value) {
document.cookie = key + "=" + value + "; path=/";
}

然后像这样加载选择(初始化时)：

var savedSelect = getFromBrowserCookies("settings_select");
if (savedSelect) {
var select = document.getElementById("chosen-url");
select.value = savedSelect;
}
function getFromBrowserCookies(key) {
var cookies = {}
var all = document.cookie;
var value = null;
if (all === "") { return cookies }
else {
var list = all.split("; ");
for (var i = 0; i < list.length; i++) {
var cookie = list[i];
var p = cookie.indexOf("=");
var name = cookie.substring(0, p);
if (name == key) {
value = cookie.substring(p + 1);
break;
}
}
}
return value;
}

但是，这不起作用。

Answer 1

您可以将任何内容保存在存储或cookie中，只要它是字符串。所以在你的情况下，我建议：

1. 获取所有选择选项和当前选择的值并创建 具有易于理解的结构的对象。
2. 使用 JSON.stringify 将此对象字符串化为 JSON 形式。
3. 将 json 字符串保存在 cookie 或 LS 中。
4. 重新加载后，获取保存的 json，使用 JSON.parse 读取它并从对象中获取所有需要的信息。
5. 重新创建选择元素并设置其选择值。

我认为控制选择输入本身超出了这个问题的范围，特别是因为我们不知道你是用纯 js 还是在某种框架中编程。但是有很多关于如何在网络上控制选择输入的信息，例如，在这里你可以找到关于"如何以编程方式设置选择值"的体面答案。

编辑：您编辑了您的问题，所以我也会在我的回复中添加一些内容。您正在尝试将整个"这个"保存为 cookie。我不是jquery的忠实粉丝，但我想"this"不一定是所选值。它可能是一个完整的 DOM 对象或更改事件。尝试注销"this"，看看它是什么。您需要将字符串保存在 cookie 中。

此外，如果 Cookie 已保存，请检查开发人员工具。

最后但并非最不重要的一点是，在 for 循环中使用break是有问题的。您可以尝试使用 list.find 代替。