div color with input color and localstorage not working

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 for a kind help.

Cheers


1 Reply 1 reply marked as answer

KR Keerthana Rajendran Syncfusion Team June 17, 2021 12:57 PM UTC

Hi kkvbsuresh, 

Thanks for contacting Syncfusion support. 

We checked your query and it seems that Syncfusion components are not used in the code. However, we suggest you to refer the following blogs similar to your requirement for general queries. 




Please get back to us if you have any queries with our Syncfusion products.  

Regards, 
Keerthana R .  


Marked as answer
Loader.
Up arrow icon