0

Simple question here, I've got a button with JavaScript that changes from ON to OFF changing it's class attribute.

So, the default value is OFF, and when you click it, swaps to ON. The problem is that everytime you navigate through the website's pages it always displays as OFF from default even if you selected ON previously.

Is it anyway with JavaScript or jQuery to remain the option selected from the previous page? I'm using class attribute to change the element from ON to OFF

Thanks in advance for your help!

ermac
  • 428
  • 1
  • 5
  • 13
  • 3
    JS retains no data from page to page by itself. If you want to store data between page loads (or even site visits) look in to using `sessionStorage`, `localStorage`, cookies or a server-side datastore. From what you've described I would say that `localStorage` is adequate in this case. – Rory McCrossan May 21 '16 at 17:21
  • on click, send an ajax request to server, and keep the value in session. – Gogol May 21 '16 at 17:22
  • Check this post out http://stackoverflow.com/questions/11609376/passing-data-between-html-pages .. Would any of these approaches solve your problem? – Antonio Manente May 21 '16 at 17:23
  • I will read about it, thanks everyone – ermac May 21 '16 at 17:28

1 Answers1

1

There are two ways that comes to my mind where you can get the value from the previous page. In each case the previous page would need to store the data (option value) somewhere and the next page would need to load this data from there.

  1. SERVER-SIDE Solution (Permanent Solution)

    • When user selects the option on the previous page, the page should then send the data to the server via AJAX, or using the <form> element. Server can then store the option into the database, file or session storage...
    • When you load the next page from the server, this page can be set to already include the data on loading or fetch it dynamically via AJAX.

  2. CLIENT-SIDE Solution (Data persistency not guaranteed)

    • When user selects the option on the previous page, the page should then save the data to the local storage of the browser. This means if user clears the data in the browser, it will be lost forever.
    • When you load the next page from the server, just fetch the option from the local storage. It's easy... http://www.w3schools.com/html/html5_webstorage.asp

Furthermore:

  • The data can be stored in cookies. Similar to local storage but will be sent to server with each HTTP request. This would be overhead if you don't need this data on the server. Use local storage instead.

  • The data can be passed in the URL. Only if you want the user to be able to change this data.

Hrvoje Golcic
  • 3,446
  • 1
  • 29
  • 33