Как сохранить внесенные изменения в DOM с помощью javascript / jquery на странице обновления

Моя проблема в том, что когда я нажимаю ссылку (пример второй страницы ), она отображает вторую страницу на экране. Но когда я перезагружаю страницу, текущая страница не сохраняется и возвращается к странице по умолчанию.

Как сохранить желаемую страницу от обновления до страницы по умолчанию?

JavaScript:

 $(function(){ $('.one').show(); $('.two').hide(); $('.three').hide(); $('#show_one, #show_one1').click(function(){ $('.one').show(); $('.two').hide(); $('.three').hide(); $('.modal').modal('hide'); return false; }); $('#show_two, #show_two2').click(function(){ $('.one').hide(); $('.two').show(); $('.three').hide(); $('.modal').modal('hide'); return false; }); $('#show_three, #show_three3').click(function(){ $('.one').hide(); $('.two').hide(); $('.three').show(); $('.modal').modal('hide'); return false; }); });  

HTML:

  
Page 1
Page 2
Page 3

Когда вы изменяете состояние своей DOM с помощью javascript, он будет сбрасываться до фактического состояния перезагрузки страницы. Если вы хотите сохранить это состояние и представить DOM в том же состоянии при перезагрузке, вам придется использовать либо localStorage, либо sessionStorage . В этом случае я буду использовать sessionStorage, чтобы показать вам, как это можно сделать. Вы можете прочитать о различии здесь – http://www.w3schools.com/html/html5_webstorage.asp

Рабочий пример

Полный рабочий пример того, как это можно сделать, – http://codepen.io/nitishdhar/pen/DGHkw

Вы можете перейти на некоторую страницу, а затем обновить окно браузера, и оно останется на этой странице.

Детальное объяснение

Прежде всего, способ, которым вы управляете шоу, может быть улучшен следующим образом:

Вы можете просто добавить один общий class ко всем ссылкам / кнопкам, из которых вы хотите, чтобы событие изменения страницы вызывало и хранило атрибут данных в них, определяя, какую страницу они должны открывать, если щелкнуть, что-то вроде этого –

Для ссылок

 
  • One
  • Two
  • Three
  • Обратите внимание на добавленный атрибут class & data-page. Также я дал # для href, таким образом вам не придется возвращать false на событие click. Вы также можете использовать javascript: void (0); вместо #, если вы не хотите, чтобы ваш хеш windows обновлялся.

    Для кнопок также

        

    Я также добавил class modal-btn только для кнопок, которые отображают внутри модального. Это относится к модальному экранированию только для кнопок, которые находятся в модальном режиме. Нет необходимости прикреплять модальные («скрыть») к другим ссылкам.

    Теперь в вашем javascript, чтобы он работал, вы сделаете что-то вроде этого –

     $('.show-page').click(function(){ /* Get the Page to Show */ var pageToShow = $(this).data('page'); /* Hide all pages first */ $('.page').addClass('hide'); /* Show the page whose link was clicked */ $('.' + pageToShow).removeClass('hide'); }); $('.modal-btn').click(function() { $('.modal').modal('hide'); }); 

    Поэтому мы пытаемся связать событие click каждого элемента с classом show-page. Затем по щелчку мы читаем, что находится в атрибуте атрибута данных конкретного элемента clicked. Затем мы скрываем все страницы и показываем только те, чей держатель был нажат. Таким образом, вам не нужно писать отдельные обработчики событий для всех кнопок.

    Я также обрабатываю скрытие модального отдельно.

    Использование хранилища сеансов

    Теперь хранилище сеансов – это хранилище браузера, которое будет содержать некоторые данные для текущего сеанса, т.е. пока пользователь не закроет окно браузера.

    Мы будем поддерживать переменную, которая будет содержать пользователя последней страницы раньше, что-то вроде этого –

     /* Check if session has some page to show stored */ if(typeof(Storage)!== "undefined" && sessionStorage.getItem('pageToShow')) { var pageToShow = sessionStorage.getItem('pageToShow'); /* Hide all pages first */ $('.page').addClass('hide'); /* Show the page whose link was clicked */ $('.' + pageToShow).removeClass('hide'); /* Also set this page to session storage */ sessionStorage.setItem('pageToShow', pageToShow); } 

    Теперь при нажатии на события, когда пользователь пытается перейти на страницу, мы будем продолжать обновлять переменную сеанса ‘pageToShow’, что-то вроде этого –

     $('.show-page').click(function(){ /* Get the Page to Show */ var pageToShow = $(this).data('page'); /* Hide all pages first */ $('.page').addClass('hide'); /* Show the page whose link was clicked */ $('.' + pageToShow).removeClass('hide'); if(typeof(Storage)!=="undefined") { sessionStorage.setItem('pageToShow', pageToShow); } }); 

    Теперь, если пользователь обновит страницу, мы сначала проверим, есть ли у нас установка pageToShow в сеансе, и если мы это сделаем, мы перейдем на эту страницу, как и вы.

    Примечание. Вы можете использовать localStorage вместо sesstionStorage, если вы хотите, чтобы переменная pageToShow оставалась даже после того, как пользователь закрыл и снова открыл браузер.

    Установите все на и вы золотой.