On Sliding The Details Of Particular Position Should Store In Local Storage?

I am replicating this webpage https://www.modsy.com/project/furniture and I wrote the code On every slide there will be changing of image and phrase like that there are three phras

Solution 1:

Are you just trying to remember what the last slide the user viewed is? If so just use the localStorage.setItem() method and utilise the dataset feature to set a flag of each slide.

If I am right in my presumption your on load function would include the following line to default to the first slide:

localStorage.setItem('currentSlide', '1')

Your HTML slides would each have a dataset tag which could be something like:

data-index="1"

Then, in your change slide function you would get the dataset value and update the localStorage parameter:

functionchangeSlide() {

   // ... Whatever code you have... localStorage.setItem('currentSlide', this.dataset.index);
}

You could also use the sessionStorage instead, if you do not wish for the website to remember the user's last position after they leave the page: https://developer.mozilla.org/en-US/docs/Web/API/Storage

Solution 2:

you can save your image using savImage function

html

<img src="../static/images/1.jpg"id="bannerImg" />

js

functionsaveImage() {
    var bannerImage = document.getElementById('bannerImg');
    var canvas = document.createElement("canvas");
    canvas.width = bannerImage.width;
    canvas.height = bannerImage.height;

    var ctx = canvas.getContext("2d");
    ctx.drawImage(bannerImage, 0, 0);

    var dataURL = canvas.toDataURL("image/png");

    localStorage.setItem("imgData", dataURL.replace(/^data:image\/(png|jpg);base64,/,"");
}

after your process you can get your image from local storage

html

<img src=""id="tableBanner" />

js

functiongetImage() {
   var dataImage = localStorage.getItem('imgData');
   bannerImg = document.getElementById('tableBanner');
   bannerImg.src = "data:image/png;base64," + dataImage;

}

you must run these two function for your problem