Zmiana szablonu z wykorzystaniem sesji

Zmiana szablonu jest bardzo popularną funkcjonalnością w wielu serwisach internetowych, zwłaszcza w szablonach administracyjnych. Dlatego chce pokazać, jak w bardzo prosty sposób to zastosować z wykorzystaniem sesji HTML5.

Sesja HTML5

Jeszcze parę lat temu sesja mogła odbywać się wyłącznie za pomocą ciastek (cookies), jednak z czasem pojawienia się standardu HTML5 nieco się to zmieniło i obecnie zyskuje na wartości sesja z języka HTML5. Nie działa to na zasadzie, żadnych ciastek, jest o wiele prostsze i działa znakomicie.
Dla bardziej ciekawskich jaka jest różnica między sesją HTML5 a cookies ten artykuł nie będzie odpowiedni. Ja skupię się głównie na przykładzie, ale pokrótce powiem czym jest localStorage i sessionStorage. Obie funkcji działają po stronie użytkownika, co jest plusem, gdy tworzymy aplikację, które częściowo nie mają dostępu do internetu.

localStorage

Dane zapisane do localStorage mają charakter długotrwały, a więc użytkownik po zapisaniu danych/obiektu do tej funkcji ma je cały czas w sesji, nawet po zamknięciu przeglądarki.

sessionStorage

Jest to odpowiednik cookies, choć nieco o większej skali. Dane wysyłane są wyłącznie na żądanie. Z ciekawostek to sessionStorage można przypisać do każdej karty przeglądarki, a więc pracę w różnych sesjach na jednej stronie. No i oczywiście sesja zostaje skasowana wraz z zamknięciem sesji.

Sesja HTML5 w praktyce

Na przykładzie zmiany szablonu strony można by zastosować bardzo prosty skrypt, który będzie podmieniać i wczytywać inny plik css, w zależności jaki użytkownik wybierze.

if((localStorage.getItem("zamiana")==null)||(localStorage.getItem("zamiana")=="0")){
        localStorage.setItem("zamiana", "0");
        setStyleSheet("css/style1.css") ;
    }else{
        setStyleSheet("css/style2.css");
    }   

function setStyleSheet(url){
    var stylesheet = document.getElementById("stylesheet");
    stylesheet.setAttribute('href', url);
}

A więc przy wczytaniu strony po raz pierwszy mamy ustawione w szablonie jako główne style1.css.
Funkcja setStylesheet ustawia właściwy szablon pod nasza stronę.
Aby przełączyć się na inny szablon potrzebujemy jakiegoś przełącznika, np:

<button id="zmiana">zmień szablon</button>

Tutaj również potrzebujemy parę linijek kody, który to zrobi:

jQuery("#zmiana").click(function(){
        if(localStorage.getItem("zamiana")=="0"){
            setStyleSheet("css/style2.css");
            localStorage.setItem("zmiana", "1");
        }else{
            setStyleSheet("css/style1.css") ;
            localStorage.setItem("zamiana", "0");
        }
    });

Całość działa na zasadzie przypisania 0 lub 1 dla odpowiedniego stylu. A więc w bardzo prosty sposób możemy manipulawać tymi zmiennymi i ich zawartości. Można na tym budować całą stronę, zarówno dla sesji localStorage jak i sessionStorage

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *

CAPTCHA
Change the CAPTCHA codeSpeak the CAPTCHA code