将用户首选项存储到对象中并在以后重复使用

Question

我想构建一个应用程序，让用户将他的偏好存储到对象中，然后再使用它们。

到目前为止，我已经成功地将用户输入存储到数组中的对象中。现在我无法弄清楚如何使用存储的输入和重用。用户命名他的颜色并选择 rgbo ，点击保存，他的颜色已经出现在按钮旁边的下拉列表中。他可以有多种选择。稍后当用户决定改回一些旧外观时，他需要从列表中选择颜色并点击 Place 按钮。这是JS Bin

我正在寻找一些关于如何解决这个问题的指南。 谢谢。

Answer 1

到目前为止，您似乎已经拥有了所需的东西，但是 Place() 函数是空的。当用户对滑块进行更改并单击“保存”时，colors 数组将正确更新为包含正确信息的新对象。所以colors 是你要求的对象；您只需要在Place() 函数中对其进行处理。这是一些更新的代码，我将按照我认为您正在尝试完成的操作：

function changeColors() {
    //get the numbers from the html
    var rd = parseInt(document.getElementById("red").value);
    var gr = parseInt(document.getElementById("green").value);
    var bl = parseInt(document.getElementById("blue").value);
    var op = parseFloat(document.getElementById("opacity").value);

    //convert the decimal into hexadecimal

    var rdhex = (rd < 16) ? "0" + rd.toString(16) : rd.toString(16);
    var grhex = (gr < 16) ? "0" + gr.toString(16) : gr.toString(16);
    var blhex = (bl < 16) ? "0" + bl.toString(16) : bl.toString(16);

    //concatenate all hex to generate a color
    var hexcode = "#" + rdhex + grhex + blhex;

    //set the background of the div
    setColor(hexcode, op);
}

function setColor(hexcode, opacity) {
    //view the change in the browser
    document.getElementById("div").style.backgroundColor = hexcode;
    document.getElementById("colordisplay").innerHTML = hexcode;
    //change opacity
    document.getElementById("div").style.opacity = opacity; 
}

var colors = [];

function Save() {
    var name = document.getElementById("name").value;
    var rgb = document.getElementById("colordisplay").innerHTML;
    var opacity = document.getElementById("div").style.opacity;
    colors.push({
        name_prop:name,
        rgb_prop:rgb,
        opacity_prop:opacity
    });

    //pass the object to the drop down list
    var select = document.getElementById("selectColor");
    var opt = name;
    var el = document.createElement("option");
    el.innerHTML = opt;
    el.value = opt;
    select.appendChild(el);
    console.log(colors);
}

function Place() {
    var select = document.getElementById("selectColor");
    colors.forEach(function(colorObject) {
        if (colorObject.name_prop == select.value) {
            setColor(colorObject.rgb_prop, colorObject.opacity_prop);
        }
    });               
}

请注意，所有这些都只会在用户访问此页面期间存在。一旦他们重新加载页面，数据就消失了。如果您想保存内容以供以后访问该页面，您正在寻找一个更复杂的解决方案。