Switching images with localstorage

Question

I have this code to switch some images when light/dark mode is changed but I want to store this in localstorage and have the same value after refresh, how should I change this code for that?

jQuery :

jQuery(document).ready(function($){
    
    $('.light-mode').on({
         'click': function(){
             $('#change-image1').attr('src','/images/group.png');
             $('#change-image2').attr('src','/images/list.png');
             $('#change-image3').attr('src','/images/chat.png');
         }
     });
     
    $('.dark-mode').on({
         'click': function(){
             $('#change-image1').attr('src','/images/group2.png');
             $('#change-image2').attr('src','/images/list2.png');
             $('#change-image3').attr('src','/images/chat2.png');
         }
     });
     

    });

HTML :

  <button class="light-mode"  onclick="swapStyle('css/main.css');">Light Mode</button>
  <button class="dark-mode"  onclick="swapStylea('css/maina.css');">Dark Mode</button>

<img class="icon" id="change-image1" src="/images/group.png">
<img class="icon" id="change-image2" src="/images/list.png">
<img class="icon" id="change-image3" src="/images/chat.png">

Welcome to Stack Overflow .. this can help : https://stackoverflow.com/a/19183658/14945696 — Kevin M. Mansour, Apr 12 '21 at 14:25

score 0 · Accepted Answer · answered Apr 12 '21 at 14:39

0

You can use this:

localStorage.setItem("img1", "/images/group.png");

var img = localStorage.getItem("img1");
$('#change-image1').attr('src', img);

answered Apr 12 '21 at 14:39

r1ddler

178
6

Switching images with localstorage

1 Answers1