Запомнить Свернуть/Развернуть состояние раздела при использовании кнопки «Назад назад»

Question

У меня есть несколько разделов на моем сайте. Я разрешаю зрителю развернуть/свернуть разделы по отдельности. Разделы расширены с помощью javascript (jquery/zepto). (Существует кнопка для каждой секции, чтобы развернуть ее или свернуть ее.)

Если зритель покидает страницу, чтобы просмотреть связанный документ, а затем возвращается с помощью кнопки «Назад» браузера, все разделы рушится.

Я мог хранить состояние разделов в файле cookie. Но я не думаю, что cookie читается, когда зритель возвращается на страницу с помощью кнопки «Назад» ... Есть ли способ запомнить состояние (расширенное/сведенное) разделов?

Answer 1

Рассмотрите возможность использования локального хранилища HTML5 - он пока не поддерживается всеми браузерами, но его очень просто реализовать.

Например:

var foo = localStorage.getItem("foo"); 
// ... 
localStorage.setItem("content", item); 

В вашем случае, просто добавьте строку, чтобы обновить список в LocalStorage для этого «раздела» всякий раз, когда он развернут или свернут:

// Inside your function: 
var state = // whether the 'section' is expanded or collapsed 
localStorage.setItem(state, $(this).id()); 

и когда страница загружается

$(section).each(function() { // 'section' should target all collapsible elements 
    var expanded = localStorage.getItem($(this).id()); // be careful here - make sure it's parsed in the correct format 
    if (expanded == 1) { 
     $(this).expand(); // your expand function 
    } else { 
     $(this).collapse(); // your collapse function 
    } 
}); 

Read up about it here