Question

我想构建一个应用程序，让用户将他的首选项存储到对象中，然后重用它们。

到目前为止，我已成功将用户输入存储到数组中的对象中。现在我无法弄清楚如何使用存储的输入和重用。用户命名他的颜色并选择rgbo，点击保存并且他的颜色已经出现在按钮旁边的下拉列表中。他可以有多种选择。稍后，当用户决定更改回旧的外观时，他需要从列表中选择颜色并点击“放置”按钮。这是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);
        }
    });               
}

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

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

1 个答案: