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

Passing variables dynamically in a created Express.js route

proper integration of socket.io

Implementing JavaScript Functions to Trigger Control Key and Plus/Minus Events

I customized the navbar in Bootstrap by centering it with custom CSS, but whenever I click on it, it suddenly shifts to one side. I'm puzzled as to why this is happening and

Extracting URLs using Selenium from specific cells within a table

Converting text data into JSON format using JavaScript

adaptive height that scales with content proportionally

Why is React JS unable to discover my exported modules?

Allow the button to be clicked only when both options from the 1/3 + 1/3 radio buttons are selected

React checkbox displaying incorrect render

I'm new to Angular, so could you please explain this to me? I'm trying to understand the concept of `private todoItems: TodoItem[] = []`. I know `TodoItem` is an array that

What is the process for updating a collection in MongoDB database with PHP?

Is it achievable to create shadows that do not overlap?

how to share global variables across all components in react js

jQuery tooltips experiencing lag or duplication when closing on adjacent elements

Efficiently formatting text in a div container

What is the best way to integrate a loop in JavaScript to retrieve values?

Using jQuery and JSON data to dynamically populate a second dropdown menu with filtered options

Error: Module not found - Imported Node Module

Show the profile picture of a model in a Django template