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

【问题标题】：Save and load full html select in cookie/localStorage在 cookie/localStorage 中保存并加载完整的 html 选择
【发布时间】：2019-07-26 23:17:36
【问题描述】：

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

然后从 cookie 中加载此配置。

根据之前的问题，我目前使用 onChange 侦听器保存选择元素，该侦听器保存元素如下：

$('#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;
}

但是这不起作用。

【问题讨论】：

标签： javascript jquery cookies local-storage html-select

【解决方案1】：

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

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

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

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

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

最后但同样重要的是，在 for 循环中使用 break 是 questionable。您可以尝试改用 list.find。

【讨论】：