Skip to main content
4 de 4
correcciones de formato y ortografía
Alvaro Montoro
  • 49.8k
  • 28
  • 109
  • 190

Podrías hacerlo guardándolo en el LocalStorage.

Ejemplo JSFiddle:

<select name="seleccion" id="">
    <option value="red">red</option>
    <option value="green">green</option>
    <option value="yellow">yellow</option>
  </select>

  <div id="cuadro" style="width: 100px;height: 100px;">
    
  </div>
    <script>

    if (typeof(localStorage) === "undefined") {
        alert("no soporta localstorage")
    }

    if (localStorage.getItem('background-color')) {
        let color = localStorage.getItem('background-color');
        $("#cuadro").css("background-color", color);
        $(`option[value="${color}"]`).attr('selected', 'selected');
    }

    $('select').on('change', function() {
        //console.log( this.value );
        if (this.value == 'red') {
            $("#cuadro").css("background-color", "red");
            localStorage.setItem('background-color', 'red');
        } else if (this.value == 'green') {
            $("#cuadro").css("background-color", "green");
            localStorage.setItem('background-color', 'green');
        }else{
            $("#cuadro").css("background-color", "yellow");
            localStorage.setItem('background-color', 'yellow');
        }
});
</script>

Si lo deseas, puedes crear una función para mayor facilidad:

function local(attribute,value=null){
    if(value)
        return localStorage.setItem(attribute,value);
    return localStorage.getItem(attribute);
}
// set property
local('background-color', 'yellow');
// get property
local('background-color');
Bryro
  • 9.5k
  • 1
  • 11
  • 24