Сохранить состояние вкладки – HTML5 localStorage

Может ли кто-нибудь помочь мне с сохранением состояния последней вкладки на случай, если кто-то покинет страницу и вернется... заранее спасибо

 function openTab(evt, tabName) {


var i, x, tablinks;


x = document.getElementsByClassName("vehTab");


for (i = 0; i < x.length; i++) {


x[i].style.display = "none";


}


tablinks = document.getElementsByClassName("tablink");


for (i = 0; i < x.length; i++) {


tablinks[i].className = tablinks[i].className.replace("red", "");


}


document.getElementById(tabName).style.display = "block";


evt.currentTarget.className += " red";


}

HTML: ЯВАСКРИПТ:

  <div class="container"> <div class="bar blue"> <button class="bar-item button tablink red" onclick="openTab(event,'Summary')">Summary</button> <button class="bar-item button tablink" onclick="openTab(event,'Finance')">Finance</button> <button class="bar-item button tablink" onclick="openTab(event,'Enquire')">Enquire</button> <button class="bar-item button tablink" onclick="openTab(event,'Save')">Save</button> </div> <div id="Summary" class="container border vehTab"> SUMMARY IMNFO HERE </div> <div id="Finance" class="container border vehTab" style="display:none"> FINANCE INFO HERE </div> <div id="Enquire" class="container border vehTab" style="display:none"> ENQUIRY CONTENT HERE </div> <div id="Save" class="container border vehTab" style="display:none"> SAVE DETAILS HERE </div> </div>

Код (JavaScript):

Я установил демо-версию на https://codepen.io/itamer/pen/jOZPWMb

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

 const allTabs = document.querySelectorAll(".tablink");


console.log(allTabs, allTabs.length);


for (var i = 0; i < allTabs.length; i++) {


allTabs[i].addEventListener("click", openTab);


}


function openTab() {


const tabName = this.dataset.label;


for (let i = 0; i < allTabs.length; i++) {


if (allTabs[i].dataset.label === tabName) {


allTabs[i].className += " red";


document.getElementById(tabName).style.display = "block";


} else {


allTabs[i].className = allTabs[i].className.replace("red", "");


let label = allTabs[i].dataset.label;


let infoBlock = document.getElementById(label);


infoBlock.style.display = "none";


}


}


// can we access localstorage? if yes, save the value


if (typeof window !== "undefined") {


window.localStorage.setItem("activeTab", tabName);


}


// demo on retrieving the value back again.


let savedDemoField = document.getElementById("saved");


savedDemoField.innerHTML = getActiveTab();


}


function getActiveTab() {


if (typeof window === "undefined") {


return "Summary";


}


try {


// Get from local storage by key


return window.localStorage.getItem("activeTab");


// Parse stored json or if none return initialValue


} catch (error) {


console.log(error);


return "Summary";


}


}

HTML:

 <div class="container"> <div class="bar blue"> <button class="bar-item button tablink red" data-label='Summary'>Summary</button> <button class="bar-item button tablink" data-label='Finance'>Finance</button> <button class="bar-item button tablink" data-label='Enquire'>Enquire</button> <button class="bar-item button tablink" data-label='Save'>Save</button> </div> <div id="Summary" class="container border vehTab"> SUMMARY INFO HERE </div> <div id="Finance" class="container border vehTab" style="display:none"> FINANCE INFO HERE </div> <div id="Enquire" class="container border vehTab" style="display:none"> ENQUIRY CONTENT HERE </div> <div id="Save" class="container border vehTab" style="display:none"> SAVE DETAILS HERE </div> </div> <div>The saved tab is: <span id='saved' class='red'></saved>

Код (JavaScript):

Потрясающий пример того, как НЕЛЬЗЯ делать.

ничего из этого. 1) позвольте CSS сделать всю тяжелую работу.

Это означает, что не используйте для вкладок только кнопки и функции сценариев.

LABEL, указывающий на INPUT type="radio" с использованием соседнего родственного селектора, творит чудеса. 2) НИКОГДА не добавляйте атрибуты onevent в разметку, особенно если они вызывают функции, поскольку это означает, что вы загрязняете глобальное пространство имен.

Понятия типа «разделение ответственности» существуют не просто так, люди! В 99% случаев, когда вы видите что-то вроде onclick="" в HTML, вы видите невежество, некомпетентность и некомпетентность людей, не имеющих квалификации для написания кода на стороне клиента.

Примерно то же самое можно сказать и об aria-bloat BS, например о метке данных.

Помните, что роли ARIA в основном означают, что вы используете неправильную разметку.

Знаете, что может быть лучше, чем полностью переделывать страницу, вписывая в страницу больше кода, чтобы можно было использовать неправильный HTML? Использование ПРАВИЛЬНОГО HTML, вот что!

И, конечно же, даже не заставляйте меня НАЧАТЬ с умственной мигренью презентационных классов, таких как «красный» или «синий», а тем более с полным ганганом с class="button" на чертовом теге кнопки.

Йеза стал полным гунганом. Миса говорит, что Йуса Нева становится ПОЛНЫМ гунганом. Итак, сначала давайте очистим разметку и настроим ее для вкладок без сценариев.

 


{


const tabChangeEvent = (event) => {


localStorage.setItem(event.currentTarget.name, event.currentTarget.id);


};


for (let radio of document.querySelectorAll(".tabbedSections > input")) {


let storageId = localStorage.getItem(radio.name);


if (storageId) radio.checked = storageId === radio.id;


radio.addEventListener("change", tabChangeEvent);


}


}

Код (разметка): использование «скрытого» предназначено для того, чтобы мы не оказывали негативного влияния на программы чтения с экрана.



Точно так же мы НЕ скрываем отдельные разделы по умолчанию с помощью display:none, встроенного стиля или любой другой BS, поскольку мы не хотим, чтобы не -Визуальные UA (программы чтения с экрана, устройства чтения Брайля, поисковые системы) игнорируют ваш контент! По сути, мы не хотим, чтобы такие ПА игнорировали РАЗДЕЛ, но мы хотим, чтобы они игнорировали меню ввода и вкладок, поскольку для них это означает ровно две вещи.



и Джек покинул город. Помните основное правило: пишите базовый HTML так, как будто CSS, внешний вид тегов по умолчанию и ваш окончательный желаемый внешний вид СНАЧАЛА даже не существуют.

Затем, когда вы добавляете элементы и поведение, специфичные для медиа, отфильтруйте их скрытыми или другими методами.

Таким образом, вы не злитесь на доступность. Затем реализуйте вкладки в CSS.

Я настроил его на поддержку до девяти вкладок.

Вам нужно более девяти вкладок на веб-сайте, возможно, вы делаете что-то не так.

  .tabbedSections > ul { display:flex; list-style:none; padding:0; margin:0 0 -0.0625rem; border-left:0.0625rem solid #999; } .tabbedSections > ul > li { background:#CCC; border:0.0625rem solid #999; border-left:0; } .tabbedSections > ul > li:first-child { border-radius:0.5rem 0 0; } .tabbedSections > ul > li:last-child { border-radius:0 0.5rem 0 0; } .tabbedSections > ul label { cursor:pointer; display:block; padding:0.25rem 0.5rem; } .tabbedSections > * { /* Some older browsers won't let us change the input when "hidden", and somme non-visual UA's wond read display:none text so hide them off-screen instead.







*/ display:block; position:fixed; bottom:-100vh; left:-100vh; } .tabbedSections > section { padding:1rem; background:#EEE; border:0.0625rem solid #999; border-radius:0 0 0.5rem 0.5rem; } .tabbedSections > ul, .tabbedSections > input:nth-of-type(1):checked ~ section:nth-of-type(1), .tabbedSections > input:nth-of-type(2):checked ~ section:nth-of-type(2), .tabbedSections > input:nth-of-type(3):checked ~ section:nth-of-type(3), .tabbedSections > input:nth-of-type(4):checked ~ section:nth-of-type(4), .tabbedSections > input:nth-of-type(5):checked ~ section:nth-of-type(5), .tabbedSections > input:nth-of-type(6):checked ~ section:nth-of-type(6), .tabbedSections > input:nth-of-type(7):checked ~ section:nth-of-type(7), .tabbedSections > input:nth-of-type(8):checked ~ section:nth-of-type(8), .tabbedSections > input:nth-of-type(9):checked ~ section:nth-of-type(9) { position:static; /* ignore positioning */ } .tabbedSections > input:nth-of-type(1):checked ~ ul > li:nth-of-type(1), .tabbedSections > input:nth-of-type(2):checked ~ ul > li:nth-of-type(2), .tabbedSections > input:nth-of-type(3):checked ~ ul > li:nth-of-type(3), .tabbedSections > input:nth-of-type(4):checked ~ ul > li:nth-of-type(4), .tabbedSections > input:nth-of-type(5):checked ~ ul > li:nth-of-type(5), .tabbedSections > input:nth-of-type(6):checked ~ ul > li:nth-of-type(6), .tabbedSections > input:nth-of-type(7):checked ~ ul > li:nth-of-type(7), .tabbedSections > input:nth-of-type(8):checked ~ ul > li:nth-of-type(8), .tabbedSections > input:nth-of-type(9):checked ~ ul > li:nth-of-type(9) { background:#EEE; border-bottom-color:#EEE; } 

Код (разметка): Теперь, когда у нас есть рабочие вкладки без JS, мы можем улучшить их с помощью скриптов, чтобы запомнить последнюю установленную.

  <div class="tabbedSections"> <input type="radio" name="tabSection" id="tab_summary" checked hidden> <input type="radio" name="tabSection" id="tab_finance" hidden> <input type="radio" name="tabSection" id="tab_enquire" hidden> <input type="radio" name="tabSection" id="tab_save" hidden> <ul hidden> <li><label for="tab_summary">Summary</lable></ll> <li><label for="tab_finance">Finance</lable></ll> <li><label for="tab_enquire">Enquire</lable></ll> <li><label for="tab_save">Save</lable></ll> </ul> <section> SUMMARY INFO HERE </section> <section> FINANCE INFO HERE </section> <section> ENQUIRY CONTENT HERE </section> <section> SAVE DETAILS HERE </section> <!-- .tabbedSections --></div> 

Код (разметка): Внешний {} изолирует область видимости, поэтому мы не портим глобальное пространство имен.

Сначала мы настраиваем обработчик функции, поскольку он применяется несколько раз.

Затем мы перебираем все наши радиовходы, полученные с помощью querySelectorAll.

ЕСЛИ имя переключателя существует в локальном хранилище, мы устанавливаем для параметра radio.checked значение, соответствует ли идентификатор, хранящийся в LS, идентификатору на входе.

Затем мы просто подключаем наш tabChangeEvent ПРАВИЛЬНО, используя addEventListener. Легкий, с лимонной выжимкой. Codepen live об этом здесь:
https://codepen.io/jason-knight/pen/YzeXRQV

Надеюсь, это поможет. Также это написано, чтобы разрешить несколько областей вкладок на странице. Просто измените имя на всех радиовходах и идентификаторы для ассоциаций for/id, и все готово.