Is it necessary to save the details of a specific position in local storage when sliding?

Question

Is it necessary to save the details of a specific position in local storage when sliding?

Currently, I am in the process of replicating a webpage design from . I have written the code for the functionality where images and phrases change on every slide. There are three different phrases and images that are being displayed, and my goal is to store the finalized user selection of image and phrase in the local storage. Below is a snippet of my HTML code:

window.addEventListener('load', function() {
      var rangeslider = document.getElementById("sliderRange");
      var output = document.getElementById("sliderOutput");
      var images = document.getElementById("sliderImages");
      rangeslider.addEventListener('input', function() {
        for (var i = 0; i < output.children.length; i++) {
          output.children[i].style.display = 'none';
          images.children[i].style.display = 'none';
        }
        i = Number(this.value) - 1;
        output.children[i].style.display = 'block';
        images.children[i].style.display = 'block';
      });
    });

    .rangeslider {
      width: 50%;
      margin: 0 auto;
      position: absolute;
    
    }
    .myslider {
      -webkit-appearance: none;
      background: white;
      width: 100%;
      height: 20px;
      opacity: 0.8;
      margin-top: 180px;
    }
    .myslider::-webkit-slider-thumb {
      -webkit-appearance: none;
      cursor: pointer;
      background: #000080;
      width: 33%;
      height: 20px;
    }
    .col-4 {
      text-align: center;
    }
    .myslider:hover {
      opacity: 1;
    }
    .image {
      position: relative;
      width: 400px;
      margin: 0 auto;
    }
    .image>img {
      position: absolute;
      display: none;
    }
    .image>img.visible,
    .image>img:first-child {
      display: block;
    }
    #sliderOutput>div {
      display: none;
    }
    #sliderOutput>div.visible,
    #sliderOutput>div:first-child {
      display: block;
    }
    #p1{
      height: 10px;
    }

  <div class="image mt-3 mb-3" id="sliderImages">
      <img src="../static/images/1.jpg" width="400" height="180">
      <img src="../static/images/2.jpg" width="400" height="180">
      <img src="../static/images/3.jpg" width="400" height="180">
    </div><br>
    <div class="rangeslider">
      <input type="range" min="1" max="3" value="1" class="myslider" id="sliderRange">
      <div id="sliderOutput">
        <div class="container">
          <div class="row mt-4">
            <div class="col-4">
              <h6 class="display-6">Starting From Scratch</h6>
              <p> I'm designing the room </p>
            </div>
            <div class="col-4">
              <h6 class="display-6">Somewhere in Between</h6>
              <p>I'm designing around a few pieces I already own</p>
            </div>
            <div class="col-4">
              <h6 class="display-6">Mostly Furnished</h6>
              <p>I want to put the finishing touches on my room</p>
            </div>
          </div>
        </div>
        <div class="container">
          <div class="row mt-4">
            <div class="col-4">
              <h6 class="display-6">Starting From Scratch</h6>
              <p> I'm designing the room </p>
            </div>
            <div class="col-4">
              <h6 class="display-6">Somewhere in Between</h6>
              <p>I'm designing around a few pieces I already own</p>
            </div>
            <div class="col-4">
              <h6 class="display-6">Mostly Furnished</h6>
              <p>I want to put the finishing touches on my room</p>
            </div>
          </div>
        </div>
        <div class="container">
          <div class="row mt-4">
            <div class="col-4">
              <h6 class="display-6">Starting From Scratch</h6>
              <p> I'm designing the room </p>
            </div>
            <div class="col-4">
              <h6 class="display-6">Somewhere in Between</h6>
              <p>I'm designing around a few pieces I already own</p>
            </div>
            <div class="col-4">
              <h6 class="display-6">Mostly Furnished</h6>
              <p>I want to put the finishing touches on my room</p>
            </div>
          </div>
        </div>
      </div>

My primary requirement is that when the slider is on the first position, both the selected phrase and image should be stored in the local storage. Similarly, as the user makes selections on other slides, those details should also be saved accordingly.

javascript html css

Answer 1

Answer №1

Do you need to recall the last slide the user viewed? If so, consider using the localStorage.setItem() method along with the dataset feature to mark each slide.

If my assumption is correct, your onload function would have this line to set the default to the first slide:

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

Each of your HTML slides could have a dataset tag like this:

data-index="1"

In your change slide function, retrieve the dataset value and update the localStorage parameter:

function changeSlide() {

   // ... Your existing code...

   localStorage.setItem('currentSlide', this.dataset.index);
}

If you don't want the website to remember the user's position after leaving the page, consider using sessionStorage instead: https://developer.mozilla.org/en-US/docs/Web/API/Storage

Answer 2

Do you need to recall the last slide the user viewed? If so, consider using the localStorage.setItem() method along with the dataset feature to mark each slide.

If my assumption is correct, your onload function would have this line to set the default to the first slide:

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

Each of your HTML slides could have a dataset tag like this:

data-index="1"

In your change slide function, retrieve the dataset value and update the localStorage parameter:

function changeSlide() {

   // ... Your existing code...

   localStorage.setItem('currentSlide', this.dataset.index);
}

If you don't want the website to remember the user's position after leaving the page, consider using sessionStorage instead: https://developer.mozilla.org/en-US/docs/Web/API/Storage

Answer 3

Answer №2

To save your image, utilize the saveImage function

Here is the HTML:

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

Here is the JavaScript:

function saveImage() {
    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,/,"");
}

Once the processing is complete, you can retrieve your image from local storage

HTML:

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

JavaScript:

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

}

Be sure to execute both of these functions to solve your issue

Answer 4

To save your image, utilize the saveImage function

Here is the HTML:

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

Here is the JavaScript:

function saveImage() {
    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,/,"");
}

Once the processing is complete, you can retrieve your image from local storage

HTML:

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

JavaScript:

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

}

Be sure to execute both of these functions to solve your issue

Is it necessary to save the details of a specific position in local storage when sliding?

Answer №1

Answer №2

Similar questions

What is the most effective method for incorporating parameterized aesthetics using CSS in a JSP program?

What is the process for extracting a numerical value from a text box and using it to update a database?

"Maintaining Consistency: Ensuring The First Row is Repeated on Every

What is the best way to deploy a nodejs expressjs application to a server?

Troubleshooting Issues with JavaScript Counter and JSON Integration

Transform the array into an object containing corresponding key-value pairs

Rearrange element's placement using Jquery Drag & Drop

Uh oh! An error occurred when trying to submit the form, indicating that "quotesCollection is not defined" in Mongodb Atlas

issue with stacking data in Google Charts

Guide to comparing 2 arrays and determining the quantity of identical elements

How to eliminate quotation marks from an array in JavaScript?

Issue: React error message indicates that the .map() function is not recognized. The API response is in the form of an object, making

Iterate through the classes for updates rather than focusing on individual id fields

Organizing numerical values within for loops

Troubleshooting the issue: Unable to shift a div to the left in a Rails app using jQuery and CSS when a mouseover event occurs

Shopping Directive Coverage Discrepancy

Is it just me or does my wrapper always hover above the bottom of the screen?

Using Node and Express to handle form submissions, we can create a POST request that sends data to the server

What could be the reason for the component bindings being undefined within the controller?

Struggle with uploading images in codeigniter