Issue with localstorage (Div input type color with localstor


Topic: Issue with localstorage (Div input type color with localstorage) ?

kkvbsuresh asked 1 months ago

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 Luczak staff commented 1 months 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


kkvbsuresh answered 1 months ago

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 1 months ago

Yes, of course, I'm sorry I didn't paste the link. Here it is https://mdbootstrap.com/snippets/jquery/marcin-luczak/3137175


kkvbsuresh answered 1 months ago

Marcin,

               Cheers for sending the link.

But it was as same the localstorage not working ?

varghese


Marcin Luczak staff commented 1 months 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.


kkvbsuresh answered 1 months ago

Hi All,

            Cheers.

Please insert min. 20 characters.
Status

Answered

Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: Other
  • MDB Version: -
  • Device: All
  • Browser: All
  • OS: All
  • Provided sample code: No
  • Provided link: No