Does anyone know how to store a css change made by javascript function locally?


Tags: javascript,jquery,css,html5,local-storage

Problem :

I have been scratching my head for a while, and I can't figure out how I could locally store (HTML5 local storage) a change to the styling of a certain div made by a javascript function. I have a button which allows the user to change the background colour of the container by changing the css (inline). Does anyone know of a way of storing this change?



Solution :

Demo

JS (running at load or DOMContentLoaded):

var bgColor = document.getElementById('bgcolor');
bgColor.onchange = function() {
    document.body.style.backgroundColor = this.value;
    localStorage.setItem('bgColor', this.value);
};
bgColor.value = localStorage.getItem('bgColor');
bgColor.onchange();

HTML:

<input id="bgcolor" />

Or, if you use jQuery,

$('#bgcolor')
    .val(localStorage.getItem('bgColor'))
    .change(function() {
        $('body').css({'background-color': this.value});
        localStorage.setItem('bgColor', this.value);
    })
    .change();

Demo


    CSS Howto..

    CSS: How to put form input fields and button next to each other in the same line?

    How to get a picture randomly move and turn towards the changing direction around a page? (using jQuery & css)

    How does Gmail prevent overlap for elements that use absolute positioning?

    How to create this type of window,as described in the attached picture with HTML,CSS? [closed]

    How to put more than one class in css not() selector?

    HTML/CSS: How to center floating divs?

    How to change table cell colour to default on triple click html5/javascript/css

    How to style the wp_list_page in wordpress?

    How do I chain an infinite css animation to a one-time css animation?

    Show first image and display none other image

    How to add wikipedia in to a wordpress plugin

    How to render a hierarchy tree in HTML5/CSS?

    How do I ONLY add a box-shadow to the bottom with the following css?

    CSS issue - How to Prevent Floating Objects from Wrapping in a Container, without changing size of container?

    How to define CSS anchor text decoration for anchors in a specific container

    How do I take multiple CSS files with the exact same selectors and force one to be used only on a specific div?

    How to make simple_form input field wider with CSS?

    How to align text within a div

    how to alter a css class directly?

    How to Make a materialize CSS button's width same as col s12?

    How to add schedule elements into this calendar?

    How to fade gradient, image or texture as background?

    How does Matt Haughey's blog insert rosettes in each post title? [closed]

    How to get rid of hidden space HTML/CSS [closed]

    How to show and hide fieldset content on click of the legend

    How to give shadow to a border

    How to get a 2px wide border regardless of browser zoom with CSS

    How to detect which part of page user is currently on, like on this page?

    Best Practice (jQuery, CSS): How to initialize hidden elements that will toggle visible?

    How to increase the distance between table columns in html?