CODEWITHSUNDEEP
javascriptjqueryhtmllocal-storage
cars
cars

Reputation: 318

How to display same content after closing or reloading

Hi I wrote a code which has local storage applied to the options on the page. The only problem I am having is that I am unable to save the page which the options had searched. As you can see in the js fiddle. The options stay the same as which they were selected even after refresh. But when you click on the search function. It takes you to that image with those options applied. But when you refresh the page it goes back to the original. How would I keep the same display after refresh

This is my code for the local storage, it works for the options but not for the display of what the search has produced.

    $('#browsepagebutton').on('click', function() {

  $('select').each(function() {
    var id = $(this).attr('name');
    var value = $(this).find("option:selected").val();
    console.log("SetItem : " + id + " with value : " + value)
    localStorage.setItem(id, value);

  });
});

$(document).ready(function() {
  $('select').each(function() {
    var id = $(this).attr('name');
    if (localStorage.getItem(id) !== null) {
    var value = localStorage.getItem(id);
    $(this).val(value)
    }

  });
})

Js fiddle of code https://jsfiddle.net/387tnzoy/4/ (Note the function wont work) The js fiddle does show the code just so that you can get an idea of what is happening for example. When I apply filters such as animation on life of pi and click the submit button it will only show the life of pi image undreneath the options because it is the only one set with that option. The only problem now is that I want local storage to save that page. So that when I refresh it is still on that display.

Upvotes: 0

Views: 134

Answers (3)

Javi Zhu
Javi Zhu

Reputation: 68

$('select option').each(function() {
    var id = $(this).attr('name');
    if (localStorage.getItem(id) != null && id=='name') {
        $(this).attr("selected", "selected");
    }

  });

Upvotes: 1

Curiousdev
Curiousdev

Reputation: 5778

There are multiple issue with your fiddle as described below.

  1. Remove onclick="saveValues()" from Search button.
  2. Check on document ready if localstorage has value than play with your localStorage checking code
  3. Your Year dropdown have similar values for multiple options like <option value="5">2013</option> <option value="5">2014</option> <option value="5">2015</option> as you can see same value 5 here
  4. And yes @kaivosukeltaja mentioned you have to click Search if localstorage has value on ready event

I have updated fiddle you can find here

Upvotes: 1

Kaivosukeltaja
Kaivosukeltaja

Reputation: 15735

You'll just need to run the filtering after populating the options. Note that they will still flash on the screen before the JavaScript is run so you might want to keep them hidden until that.

$(document).ready(function() {
  $('select').each(function() {
    var id = $(this).attr('name');
    var value = localStorage.getItem(id);
    $(this).val(value)
  });

  $('#browsepagebutton').click(); // Add this
})

Updated fiddle: https://jsfiddle.net/387tnzoy/6/

Upvotes: 1

Related Questions