LocalStorage toggleClass время выполнения

LocalStorage не знаком совсем. Принцип работы ясен, но время их выполнения не ясны. Быстрота и зависит ли это от самого сайта. 

Вот пример: сайт в подписи

Если нажать на левую верхнюю кнопку то левая колонка уходит. Все работает как надо. При перезагрузки страницы колонка уходит. Но блин медленно… Сначала грузит её а потом добавляет стиль убрать её...

Таков и есть принцип LocalStorage. Просто не понятно где надо подработать. Или использовать cookies. Или оно так же будет медленно, Или сам скрипт так работает? Или страница тяжелая и надо смирится?

Сам скрипт:

$('#abar_toggler').click(function(event) {
              $('body').toggleClass('aside_hidden section_center');
            localStorage.setItem('isVisible', $('body').hasClass('aside_hidden section_center'));
        });
$(document).ready(function () {
         if (localStorage.getItem('isVisible') === 'true') {
          $('body').addClass('aside_hidden section_center');
          }
      });

Но блин медленно…

localstorage выполняется моментально. Проблема в ожидании

$(document).ready(function () {

этот код ждет загрузки всего html, jquery, и только потом стартует js

Документация developer.mozilla.org/ru/docs/Web/API/Document/DOMContentLoaded_event

Добавьте в самый конец страницы, например в main.tpl.php, код 

<script>
if (localStorage.getItem('isVisible') === 'true') {
     document.body.classList.add('aside_hidden', 'section_center');
}
</script>

этот код выполнится моментально, не дожидаясь jquery и т.п.

Но микроскачок все равно будет видно :) Как и любые манипуляции на сайте с помощью js

pupsik, скорость не зависит от работы самого механизма LocalStorage. В вашем случае колонка уходит тогда, когда начнёт выполняться ваш скрипт.

Варианты:

1. переписать скрипт на чистый js и инициализировать его после отрисовки нужного вам html, т.е. вставить туда на странице, где ваша колонка уже есть;
2. использовать куки и присваивать класс на сервере по наличию нужной.

Второй вариант предпочтительней.

Что то у меня при скрытии левого сайдбара, правый наоборот становится уже, хотя в записи об обновлении говорится, что он становится шире. Основной блок становится шире назначительно, при этом много пустого места вокруг на 19 дюймах. Пожалуй, с левым сайдаром смотрится лучше)

Zau4man, Спасибо. Я попробую и отпишусь.

Fuze, Я ко второму пункту и иду. Постепенно :) Сначала хотел функциональность сделать так как догадки были что localStorage тут не причем. Кукисы надо еще изучить. LocalStorage Понятней, быстрей и дала мне идею как функция сохраняется а уж из этого надо будет её бросить в куки. 

Что то у меня при скрытии левого сайдбара, правый наоборот становится уже

Даже не знаю как это возможно, так как ширину я там и там прибавлял. Колонну по середине я не хотел делать во весь экран, так же с пробелами, но немного шире… Скриншот бы и какой размер экрана? Может Ctrl+F5?

Добавьте в самый конец страницы, например в main.tpl.php, код 

Вроде также, если не медленней... 

 вставить туда на странице, где ваша колонка уже есть;

Поставил в сайдбар… Также. Медленно.

Кукисы надо еще изучить.

Там изучать нечего, всё просто.

Подключаете в свой шаблон этот файл, например так:

<?php $this->addTplJSName('jquery-cookie'); ?>

/**В JS коде устанавливаете**/
$.cookie('icms[имя_куки]', 'значение', {expires: 7, path: '/'});

/** Или переменную **/
$.cookie('icms[имя_куки]', var_name, {expires: 7, path: '/'});

// в PHP коде получаете
$cookie = cmsUser::getCookie('имя_куки');

Далее согласно переменной $cookie ставите в php коде CSS класс.

Тут можно найти много примеров.

Скриншот бы и какой размер экрана? Может Ctrl+F5?

Да, сейчас сужение справа прошло. Просто сохраняет ширину, как было.

окно 1301×649

Кстати. Скрытый текст виден в ленте активности форума. Не то, чтобы у меня там секрет, просто не ок)

Там изучать нечего, всё просто.

Да, я по быстрому пытался, но выводилось что-то вроде:

$.cookie is not a function

jquery.cookies.js тоже подключал. Делал по этому шаблону:
www.demo2s.com/javascript/jquery-toggleclass-with-cookies.html

Почитал, люди пишут что где-то может jQuery 2-а раза подключено. Я еще попробую, окуратней в этот раз мало ли ошибку сделал(чего я не исключаю).

Подключаете в свой шаблон этот файл, например так:

<?php $this->addTplJSName('jquery-cookie'); ?>

Так, минуточку. Если он уже есть в модерне а шаблон дочерный, по идеи он же подключен там? Или нет?

Кстати. Скрытый текст виден в ленте активности форума. Не то, чтобы у меня там секрет, просто не ок)

Есть такое. Я думаю Fuze в курсах этого. Сложно не заметить.

после ctrl + f5 стало так disk.yandex.ru/i/saQFFBvX26rbdA

Спасибо что сказали про это. Я думал что-то накосячил. Кстати колонка комментариев должна становится немного шире(у меня так). Но это не так уж и важно.

Вот, немного поковырявшись. Сделал через куки. И куки сработал вот с этим плагином:

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>

Сам скрипт(может кому интересно):

<script>
function hideSidebar() {
    myCookieVal = $('body').hasClass('aside_hidden section_center') ? 'isActive' : 'notActive';
    $.cookie('sidebar', myCookieVal, { path: '/' });
}
if ($.cookie('sidebar') == 'isActive') {
    $('body').addClass('aside_hidden section_center');
} else {
    $('body').removeClass('aside_hidden section_center');
}
$("#abar_toggler").click(function () {
    $('body').toggleClass('aside_hidden section_center');
    hideSidebar();
});
</script>

Спасибо ВСЕМ за помощь. Это было первое знакомство с кукисами. Рад результатам. Поставлю дней 7 по примеру Fuze.

// в PHP коде получаете
$cookie = cmsUser::getCookie('имя_куки');

До этого момента было все понятно. :)

Сам скрипт(может кому интересно):

Немного не понял. Смысл перехода на использование cookie вместо localstorage был в том, что cookie можно прочитать на уровне сервера, и сразу средствами php назначить класс контейнеру при генерации страницы, до её появления в браузере. Но, как я понял по коду выше, вы по прежнему скрываете/показываете сайдбар средствам js, что было возможно при использовании первого варианта с localstorage.

До этого момента было все понятно. :)

 это  можно применить где нибудь в php файле вашего шаблона, не знаю, каком именно файле.

Типа 

<?php
// в PHP коде получаете
$cookie = cmsUser::getCookie('имя_куки');
?>
<div id="sidebar" class="<?php echo $cookie; ?>">
сайдбар
</div>
 
 
 

в результате чего к сайдбару можно сразу добавить класс 

либо 

<div id=«sidebar» class=«isActive»>
сайдбар
</div>

или 

<div id=«sidebar» class=«notActive»>
сайдбар
</div>

вы по прежнему скрываете/показываете сайдбар средствам js, что было возможно при использовании первого варианта с localstorage.

Он зависит от сессии, закрыл браузер, все пропало. Кыкисами так и остается в течении Х дней. Да, я понял ваш ход мыслей. 

Если вы посмотрите первый вариант кода, то он отличается от того что получилось в конце. Повлияло ли «ЭТО» на быстроту, я не знаю, но стало быстрей. Маленький счелчек при загрузке меня не очень задевает, по сравнению с первым вариантом.

Ваш пример кода, мне тоже ясен. Но мне надо было добавить и убрать классы именно в <body> Чтоб поместить по центру И расширить середину и правую колонку средствами CSS. Само убирание левой колонки уже было встроено в шаблон. 

Он зависит от сессии, закрыл браузер, все пропало.

Не верно. sessionStorage — очищается, localStorage = хранится бесконечно долго. Ну скорее пока не очистите кэш браузера или не переполнится хранилище.

У меня в localStorage в  веб приложении уже год хранится некоторый текст, пока на месте)

localStorage = хранится бесконечно долго

Не знаю, у меня не хранилось. И при выходе не стоит «Отчистить все». Но это уже не важно.