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

podriasPodrías hacerlo guardandologuardándolo en el localstorageLocalStorage.

ejemploEjemplo 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>

siSi lo deseas, puedes crear una funcionfunción para mayor fasilidad.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');

podrias hacerlo guardandolo 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 funcion para mayor fasilidad.

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');

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');
se añadieron 346 caracteres en el cuerpo
Origen Enlace
Bryro
  • 9.5k
  • 1
  • 11
  • 24

podrias hacerlo guardandolo 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 funcion para mayor fasilidad.

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');

podrias hacerlo guardandolo 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>

podrias hacerlo guardandolo 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 funcion para mayor fasilidad.

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');
se añadieron 73 caracteres en el cuerpo
Origen Enlace
Bryro
  • 9.5k
  • 1
  • 11
  • 24

podrias hacerlo guardandolo 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>

podrias hacerlo guardandolo en el localstorage

ejemplo:

<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);
    }

    $('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>

podrias hacerlo guardandolo 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>
Origen Enlace
Bryro
  • 9.5k
  • 1
  • 11
  • 24
Loading