Struggling to create a functionality on my website where users can input a color, save it to localStorage, and have a specific div's background set to that color across all pages. The main content div (with the same ID) needs to display this color consistently.
Here is the current code I have:
Jquery:
if (typeof (localStorage) == 'undefined') {
document.getElementById("result").innerHTML =
'Your browser does not support HTML5 localStorage. Try upgrading.';
} else {
if (localStorage.getItem("background") !== null) {
getColour = localStorage.background;
$("#content").addClass(getColour);
}
}
console.log(localStorage);
$(document).ready(function () {
getColour = localStorage.background;
$('.palette').click(function () {
getColour = localStorage.background;
$("#content").removeClass(getColour);
localStorage.removeItem('background');
var setColour = $(this).attr("id");
$("#content").addClass(setColour);
localStorage.setItem("background", setColour);
});
});
HTML
<div id="colours">
<div id="colorPicker1" class="palette colorPicker1"></div>
<div id="colorPicker2" class="palette colorPicker2"></div>
<div id="colorPicker3" class="palette colorPicker3"></div>
<div id="colorPicker4" class="palette colorPicker4"></div>
<div id="colorPicker5" class="palette colorPicker5"></div>
<div id="result"></div>
</div>
<div id="content"></div>
CSS
#content{
text-align:justify;
position:relative;
margin:45px auto 0px auto;
width:85%;
height:100%;
border-radius:25px;
padding: 10px 10px 10px 10px;
z-index:1;
border:1px solid black;
}
.palette {
cursor: pointer;
height: 18px;
width: 18px;
border: 2px solid #000
}
.colorPicker1 {
background: /*#e1ffff;*/none;
}
#colorPicker1 {
position:fixed;
top:15px;
left:15px;
}
.colorPicker2 {
background: #ffffb8;
}
#colorPicker2 {
position:fixed;
top:15px;
left:40px;
}
.colorPicker3 {
background: #ffc5ff;
}
#colorPicker3 {
position:fixed;
top:15px;
left:60px;
}
.colorPicker4 {
background-color: #99ff9c;
}
#colorPicker4 {
position:fixed;
top:15px;
left:90px;
}
.colorPicker5 {
background: #97acff;
}
#colorPicker5 {
position:fixed;
top:15px;
left:125px;
}
#colours {
position:relative;
height:30px;
width:100%;
border:1px solid red;
}
I am relatively new to web development, currently working on a university assignment. Trying to incorporate accessibility features into the site by allowing users to change the background color for easier reading. While I've managed to store and display the chosen color using localStorage, the issue arises when switching between pages as the color resets. I have the script running on each page locally.
Any assistance would be highly appreciated!
Thanks,
Blinky