Learning how to utilize localStorage in conjunction with a color picker to modify the --var of :root

Question

Learning how to utilize localStorage in conjunction with a color picker to modify the --var of :root

After spending an entire afternoon on my JavaScript issue as a beginner, I have a specific goal in mind: allowing the user to select and change the main color of the page.

To implement this, I inserted a color picker in my HTML:

<input type="color" id="colorID" oninput="changeColor()">

I then found this code online:

// When input changes, store value as 'storedValue'
function changeColor() {
  var userColor = document.getElementById('colorID').value;
  localStorage.setItem('storedValue', document.body.style.backgroundColor = userColor);
}

// If there is a stored value, update color picker and background color
if(localStorage.storedValue) {
  document.getElementById('colorID').value = localStorage.storedValue;
  document.body.style.backgroundColor = localStorage.storedValue;
}

My aim was to replace "document.body.style.backgroundColor" with my --main-color: #fff; from :root. Despite trying various alternatives like using document.documentElement, nothing seemed to do the trick!

javascript html css

Answer 1

Answer №1

Check out this solution:

// Creating a function that runs immediately after the page loads
(function(){
if(localStorage.getItem("storedValue")){
  document.getElementById('colorID').value = localStorage.storedValue;
  document.querySelector(':root').style.setProperty('--main-color', userColor) = localStorage.storedValue;
})();

// This function changes the color based on user input and saves it
function changeColor() {
      var userColor = document.getElementById('colorID').value;
      localStorage.setItem('storedValue', document.querySelector(':root').style.setProperty('--main-color', userColor));
    }
    
    // If there is a stored value, update color picker and background color accordingly
    if(localStorage.storedValue) {
      document.getElementById('colorID').value = localStorage.storedValue;
      document.querySelector(':root').style.setProperty('--main-color', userColor) = localStorage.storedValue;
    }

Answer 2

Check out this solution:

// Creating a function that runs immediately after the page loads
(function(){
if(localStorage.getItem("storedValue")){
  document.getElementById('colorID').value = localStorage.storedValue;
  document.querySelector(':root').style.setProperty('--main-color', userColor) = localStorage.storedValue;
})();

// This function changes the color based on user input and saves it
function changeColor() {
      var userColor = document.getElementById('colorID').value;
      localStorage.setItem('storedValue', document.querySelector(':root').style.setProperty('--main-color', userColor));
    }
    
    // If there is a stored value, update color picker and background color accordingly
    if(localStorage.storedValue) {
      document.getElementById('colorID').value = localStorage.storedValue;
      document.querySelector(':root').style.setProperty('--main-color', userColor) = localStorage.storedValue;
    }

Answer 3

Answer №2

Trying to retrieve a value from local storage using this code is incorrect:

function changeColor() {
      var userColor = document.getElementById('colorID').value;
localStorage.setItem('storedValue', document.body.style.backgroundColor = userColor);
}
    
    if(localStorage.storedValue) {
        document.getElementById('colorID').value = localStorage.storedValue;
        document.body.style.backgroundColor      = localStorage.storedValue;
    }

The correct way to access stored values in local storage is as follows:

 function changeColor() {
          var userColor = document.getElementById('colorID').value;
          document.body.style.backgroundColor=userColor;
          localStorage.setItem('storedValue', userColor);
        }
    
        if(localStorage.getItem("storedValue")) {
             let storedValue=localStorage.getItem("storedValue");
             document.getElementById('colorID').value = storedValue;
             document.body.style.backgroundColor      = storedValue;
            }

Answer 4

Trying to retrieve a value from local storage using this code is incorrect:

function changeColor() {
      var userColor = document.getElementById('colorID').value;
localStorage.setItem('storedValue', document.body.style.backgroundColor = userColor);
}
    
    if(localStorage.storedValue) {
        document.getElementById('colorID').value = localStorage.storedValue;
        document.body.style.backgroundColor      = localStorage.storedValue;
    }

The correct way to access stored values in local storage is as follows:

 function changeColor() {
          var userColor = document.getElementById('colorID').value;
          document.body.style.backgroundColor=userColor;
          localStorage.setItem('storedValue', userColor);
        }
    
        if(localStorage.getItem("storedValue")) {
             let storedValue=localStorage.getItem("storedValue");
             document.getElementById('colorID').value = storedValue;
             document.body.style.backgroundColor      = storedValue;
            }

Answer 5

Answer №3

A key aspect to keep in mind is that writing/reading data in the local/session storage requires the use of stringify/parse methods:

// Embed a hidden input in your HTML file
<input type="hidden" value="your_css_variable_value" id="myId"/>

// Access the element in your JS file and retrieve its value
const bgColor = document.querySelector('#myId').value;

// When there's an input, capture it as 'storedValue'
function changeColor() {
  var userColor = document.getElementById('colorID').value;
  document.body.style.backgroundColor      = userColor;
  localStorage.setItem('storedValue', JSON.stringify(userColor));
}

// If there's a stored value, update the color picker and background color accordingly
if (localStorage.getItem('storedValue')) {
  const savedColor = JSON.parse(localStorage.getItem('storedValue'));
  document.getElementById('colorID').value = savedColor;
  document.body.style.backgroundColor      = savedColor;
}

Answer 6

A key aspect to keep in mind is that writing/reading data in the local/session storage requires the use of stringify/parse methods:

// Embed a hidden input in your HTML file
<input type="hidden" value="your_css_variable_value" id="myId"/>

// Access the element in your JS file and retrieve its value
const bgColor = document.querySelector('#myId').value;

// When there's an input, capture it as 'storedValue'
function changeColor() {
  var userColor = document.getElementById('colorID').value;
  document.body.style.backgroundColor      = userColor;
  localStorage.setItem('storedValue', JSON.stringify(userColor));
}

// If there's a stored value, update the color picker and background color accordingly
if (localStorage.getItem('storedValue')) {
  const savedColor = JSON.parse(localStorage.getItem('storedValue'));
  document.getElementById('colorID').value = savedColor;
  document.body.style.backgroundColor      = savedColor;
}

Answer 7

Answer №4

Just wanted to give an update on this thread and express my gratitude for all the responses.

In my initial question, I provided an example that confused some individuals. Here is the actual task at hand:

// Capture input value and store it as 'storedValue'
function changeColor() {
  var userColor = document.getElementById('colorID').value;
  localStorage.setItem('storedValue', document.querySelector(':root').style.setProperty('--main-color', userColor));
}

// If a value is stored, update color picker and background color
if(localStorage.storedValue) {
  document.getElementById('colorID').value = localStorage.storedValue;
  document.querySelector(':root').style.setProperty('--main-color', userColor) = localStorage.storedValue;
}

The current issue I'm facing is that the data doesn't persist when I refresh the page. I feel like I'm so close to getting it right! What adjustments should I make to get this code functioning properly?

Answer 8

Just wanted to give an update on this thread and express my gratitude for all the responses.

In my initial question, I provided an example that confused some individuals. Here is the actual task at hand:

// Capture input value and store it as 'storedValue'
function changeColor() {
  var userColor = document.getElementById('colorID').value;
  localStorage.setItem('storedValue', document.querySelector(':root').style.setProperty('--main-color', userColor));
}

// If a value is stored, update color picker and background color
if(localStorage.storedValue) {
  document.getElementById('colorID').value = localStorage.storedValue;
  document.querySelector(':root').style.setProperty('--main-color', userColor) = localStorage.storedValue;
}

The current issue I'm facing is that the data doesn't persist when I refresh the page. I feel like I'm so close to getting it right! What adjustments should I make to get this code functioning properly?

Answer 9

Answer №5

Give this a shot:

inputColor.addEventListener("input", changeColor, false);

function changeColor() {
    debugger;
  var userColor = document.getElementById('colorID').value;
  localStorage.setItem('storedValue', JSON.stringify(userColor));

    // check if there is a stored value and update color picker and background color
if (localStorage.getItem('storedValue')) {
  const savedColor = JSON.parse(localStorage.getItem('storedValue'));
  document.body.style.backgroundColor      = savedColor;
}
    
}

Answer 10

Give this a shot:

inputColor.addEventListener("input", changeColor, false);

function changeColor() {
    debugger;
  var userColor = document.getElementById('colorID').value;
  localStorage.setItem('storedValue', JSON.stringify(userColor));

    // check if there is a stored value and update color picker and background color
if (localStorage.getItem('storedValue')) {
  const savedColor = JSON.parse(localStorage.getItem('storedValue'));
  document.body.style.backgroundColor      = savedColor;
}
    
}

Learning how to utilize localStorage in conjunction with a color picker to modify the --var of :root

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

I have noticed that the share buttons on Sharethis.com only show up after I resize the viewport

What is the process for modifying a Joomla plugin?

Link functioning properly for one item but failing for another

Tips for achieving seamless scrolling with the combination of javascript and css

Confusion arises from conflicting Vue component script indentation guidelines

What is the best approach for dynamically appending new elements to a JSON array using PHP?

Is it possible to stream audio using a web socket?

Refresh the view seamlessly using Ajax without reloading the page

What is the syntax for invoking a function within a nested function in TypeScript?

Mocha maintains the integrity of files during testing

The Ajax request is not passing the values of the submit button as expected

Clicking the button will trigger the onclick event

What is the most effective method for pausing execution until a variable is assigned a value?

integrating a ui-bootstrap modal in a sidebar using angularjs

Create a division that will remain visible on the screen and allow scrolling when a certain class is

Enhancing the appearance of multiple images with CSS and Bootstrap styling

Adding middleware to the res.render() function can be extremely helpful when dealing with a large number

Erasing a comment creates empty spaces

Why isn't my Vue.js application automatically refreshing when I add or remove an object from the array?

How to make a routerLink clickable within an anchor tag in Angular 6