Topic: Issue with localstorage (Div input type color with localstorage) ?
The below following is the full code where i am trying to learn the localstorage and the localstorage doesn't work.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<style>
.div1 {
background-color: #ff0;width:150px;height:150px;
}
</style>
</head>
<body>
<h2>HTML Table</h2>
<input type="color" id="colorit" onchange="setColor()"/>
<div class="div1">
</div>
<script>
$(".div1").localStorage.getItem('bgcolor') ;
var ClassName;
function setColor() {
//localStorage.setItem('background', $('#colorit').val());
ClassName = $('#colorit').val();
$('.div1').css('background-color', ClassName);
localStorage.setItem('bgcolor', 'ClassName');
}
function getColor() {
//localStorage.getItem('background');
$('#colorit').val(ClassName);
localStorage.getItem('bgcolor') ;
}
setColor();
</script>
</body>
</html>
Could you able to solve it ?
Looking forward from you.
Cheers
varghese
Marcin,
Cheers for sending the link.
But it was as same the localstorage not working ?
varghese
Marcin Luczak staff commented 2 years ago
My example shows working localstorage. To check it please open your web browser devtools (F12), go to 'Application' tab and in the 'Local storage' section you should have mdbootstrap.com site with bgcolor key that will change every time you pick a color.
Hi Marcin,
Thanks for the reply.
Could you able to know me the solution you created ?
Looking forward from you.
Cheers
varghese
Marcin Luczak staff commented 2 years ago
Yes, of course, I'm sorry I didn't paste the link. Here it is https://mdbootstrap.com/snippets/jquery/marcin-luczak/3137175
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- ForumUser: Free
- Premium support: No
- Technology: Other
- MDB Version: -
- Device: All
- Browser: All
- OS: All
- Provided sample code: No
- Provided link: No
Marcin Luczak staff commented 2 years ago
Hello,
I've created a snippet with changes in your code fixing your issues. You should not call localStorage on the div element, and you should pass a ClassName as a variable into the setItem function instead of the 'ClassName' as a string.
I hope this will help you
Keep coding, Marcin