Question

以前有关于此的问题，但是我想知道是否有可能将html select的整个配置保存在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中，只要它是字符串即可。因此，根据您的情况，我建议：

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

我认为控制选择输入本身不在此问题的范围内，尤其是因为我们不知道您是使用纯js还是某种框架进行编程。但是，关于如何控制网络上的选定输入，有很多信息，例如here您可以找到有关“如何以编程方式设置选择值”的不错答案。

编辑：您已编辑问题，因此我还将在答复中添加一些内容。您正在尝试将整个“ this”保存为cookie。我不是jquery的忠实拥护者，但我猜“ this”不一定是选定的值。它可能是整个DOM对象，也可能是更改事件。尝试注销“ this”，看看它是什么。您需要将字符串保存在Cookie中。

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

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

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

1 个答案: