Save image from Gallery to Local storage

I have a gallery of images where the user is to select (click) 3 images and those images are to be store in localStorage.

My code is not working as expected. What am I missing?

<div class="image-gallery">
  <div class="scrollable">
    <ul>
      <li>
        <img
          src="https://res.cloudinary.com/zestarla/image/upload/v1629324697/kajabi%20work/IMG_5303_m7ip4q.jpg"
          class="image_stuck"
          id="image1"
        />
      </li>
      <li>
        <img
          src="https://res.cloudinary.com/zestarla/image/upload/v1629324696/kajabi%20work/IMG_5343_fr24bu.jpg"
          class="image_stuck"
          id="image2"
        />
      </li>
      <li>
        <img
          src="https://res.cloudinary.com/zestarla/image/upload/v1629324696/kajabi%20work/IMG_5265_byiarw.jpg"
          class="image_stuck"
          id="image3"
        />
      </li>
      <li>
        <img
          src="https://res.cloudinary.com/zestarla/image/upload/v1629324694/kajabi%20work/IMG_5307_adsgaj.jpg"
          class="image_stuck"
          id="image4"
        />
      </li>
      <li>
        <img
          src="https://res.cloudinary.com/zestarla/image/upload/v1629324693/kajabi%20work/IMG_5273_vf6pvg.jpg"
          class="image_stuck"
          id="image4"
        />
      </li>
      <li>
        <img
          src="https://res.cloudinary.com/zestarla/image/upload/v1629324691/kajabi%20work/IMG_5255_vjzfxh.jpg"
          class="image_stuck"
          id="image5"
        />
      </li>
    <ul>
  </div>
</div>
<script>
  document.querySelector(".image_stuck").addEventListener("click", funtion () {
    const reader = new FileReader();

    reader.addEventListener("load", () => {
        localStorage.setItem("recent-image", reader.result);
    });

    reader.readAsDataURL(this.file[0]);
  })
</script>

Answer

You don’t actually specify how (in what format) you want to save the image. There are two main ways I can think of. The first is to save the binary data as a base64 string; see this answer for details on that method: Get image data URL in JavaScript?

Another method and the one I would recommend for your example would be to just save the URL, maybe like this:

const images = document.querySelector(".image_stuck");
images.addEventListener("click", function(e) {
  localStorage.setItem("recent-image", e.target.src);
});
<img src="https://res.cloudinary.com/zestarla/image/upload/v1629324697/kajabi%20work/IMG_5303_m7ip4q.jpg" class="image_stuck" />
<img src="https://res.cloudinary.com/zestarla/image/upload/v1629324696/kajabi%20work/IMG_5343_fr24bu.jpg" class="image_stuck" />
<img src="https://res.cloudinary.com/zestarla/image/upload/v1629324696/kajabi%20work/IMG_5265_byiarw.jpg" class="image_stuck" />
<img src="https://res.cloudinary.com/zestarla/image/upload/v1629324694/kajabi%20work/IMG_5307_adsgaj.jpg" class="image_stuck" />
<img src="https://res.cloudinary.com/zestarla/image/upload/v1629324693/kajabi%20work/IMG_5273_vf6pvg.jpg" class="image_stuck" />
<img src="https://res.cloudinary.com/zestarla/image/upload/v1629324691/kajabi%20work/IMG_5255_vjzfxh.jpg" class="image_stuck" />