Uproszczenie zapisywania kontrastu z wykorzystaniem sessionStorage

pytanie zadane 9 lipca 2017 w JavaScript przez Pasioo Nowicjusz (240 p.)

Witam. Swego czasu chciałem napisać skrypt dotyczący zapamiętywania ustawionego kontrastu na stronie. Próbowałem wykorzystać cookies ale ostatecznie użyłem sessionStorage. Kod zajął duuużo linijek, a myślę, że da się to zrobić o wiele prościej, dlatego jeśli ktoś chce to może zaproponować łatwiejsze rozwiązania.

Kod

PS. Oczywiście proszę też o ocenę moich wypocin.

2 odpowiedzi

odpowiedź 9 lipca 2017 przez ScriptyChris Mędrzec (190,190 p.)

Kod w Twoim przypadku możesz skrócić przenosząc powtarzające się fragmenty do funkcji, a niektóre z nich sparametryzować.

Przykład:

function colorIt(colors) {
    document.body.style.color = colors.bodyColor;
    document.body.style.backgroundColor = colors.bodyBackgroundColor;
    document.getElementById("przycisk").style.color = colors.btnColor;
    document.getElementById("przycisk").style.backgroundColor = colors.btnBackgroundColor;
}

function setValueOnPage(value) {
  document.getElementById("test").innerHTML = "Wartość w pamięci " + value;
}

function getStoreValueFromStorage() {
  return sessionStorage.getItem("store");
}

function setStoreValueToStorage(value) {
  sessionStorage.setItem("store", value);
}

//zmiana kontrastu na klik
function kontrast() {
  var spr = getStoreValueFromStorage();
  if (spr == 0) {
    colorIt({
      bodyColor: 'yellow',
      bodyBackgroundColor: 'black',
      btnColor: 'black',
      btnBackgroundColor: 'white'
    });

    setStoreValueToStorage('1');
  } else {
    colorIt({
      bodyColor: 'black',
      bodyBackgroundColor: 'white',
      btnColor: 'yellow',
      btnBackgroundColor: 'black'
    });
    
    setStoreValueToStorage('0');
  }
  var wartosc = getStoreValueFromStorage(); //wyswietlanie wartosci w h1
  setValueOnPage(wartosc); //wyswietlanie wartosci w h1
}

//zmiana kontrastu na odswiezenie strony
function kontrast2() {
  var spr = getStoreValueFromStorage();
  if (spr == 1) {
    colorIt({
      bodyColor: 'yellow',
      bodyBackgroundColor: 'black',
      btnColor: 'black',
      btnBackgroundColor: 'white'
    });
  } else {
    colorIt({
      bodyColor: 'black',
      bodyBackgroundColor: 'white',
      btnColor: 'yellow',
      btnBackgroundColor: 'black'
    });
  }
  var wartosc = getStoreValueFromStorage();
  setValueOnPage(wartosc);
}

//sprawdzanie czy jest juz zapis Storage-jesli nie to go tworzy
function zapis() {
  var data = getStoreValueFromStorage();
  data ? kontrast2() : setStoreValueToStorage('0');
}

W funkcji zapis() możesz zastosować ternary operator, aby skrócić składnię if..else.

Dlaczego czasami dwa razy pobierasz wartość store z sessionStorage przypisując ją do zmiennej wartosc, przy czym korzystasz z niej dopiero za drugim razem?

komentarz 9 lipca 2017 przez ScriptyChris Mędrzec (190,190 p.)

Jeszcze bardziej skrócona wersja, gdyż funkcje kontrast i kontrast2 zdaje się, że różnią się tylko zapisem do store: https://codepen.io/ChrissP92/pen/MoPzgv?editors=1010

Atrybut onload z <body> do usunięcia.

komentarz 9 lipca 2017 przez Pasioo Nowicjusz (240 p.)

Hoho, no dobra dzięki za odpowiedź. Jak tylko dostanę się do komputera przyjrzę się bliżej, szczególnie temu co napisałeś o pobieraniu 2 razy wartości store. Tak w ogóle to jak byś ocenił to co napisałem wiedząc, że przysiadam do Js od niedawna? Wiem, że może to głupie, ale byłem ogromnie zadowolony jak to zadziałało :)

komentarz 9 lipca 2017 przez ScriptyChris Mędrzec (190,190 p.)

Zastąp stylowanie w JS (przez property style) dodawaniem/usuwaniem klas (przez classList) i stylowaniem w CSS.

odpowiedź 9 lipca 2017 przez wotaher Użytkownik (610 p.)

Jak obiecałem w poprzednim pytaniu napisałem swoją wersję. Wspominałem również że jestem laikiem więc mogą być jakieś błędy, pierwszy raz korzystałem z sessionStorage :).

<input type="button" value="1" id="przycisk"/>
		<h1 class="nag1">Header</h1>
		<p class="par1">Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum</p>

Javascript:

checkAndChange(); //Funkcja sprawdza przy załadowaniu strony czy plik sesji ma wartość 1
document.querySelector("#przycisk").addEventListener("click",createStorageItem);
function createStorageItem(){
	if(sessionStorage.getItem("odwroc")==1){
		sessionStorage.setItem("odwroc",0);
		console.log("Plik sesji istniał i miał ustawioną wartość 1 więc zmieniono wartość na 0");
	}
	else{
		sessionStorage.setItem("odwroc",1);
		console.log("Plik sesji nie istniał lub miał wartość 0 więc ustawiono jego wartość na 1");
	}
	toggleColors(); //Poza zmianą zawartości pliku sesji funkcja zmienia kolory natychmiast
}

function checkAndChange(){
if(sessionStorage.getItem("odwroc")==1){
	toggleColors();
	console.log("Plik sesji miał wartość 1 więc kolory zostały odwrócone.");
	
}
else{
	console.log("Plik sesji nie istniał lub jego wartość wynosiła 0");
}
}

function toggleColors(){
	document.querySelector("body").classList.toggle("blackBg");
	document.querySelectorAll(".nag1")[0].classList.toggle("whiteColor");
	document.querySelectorAll(".par1")[0].classList.toggle("whiteColor");
}

I CSS:

.blackBg {
	background:black;
}
.whiteColor {
	color:white;
}

komentarz 9 lipca 2017 przez wotaher Użytkownik (610 p.)

Dodaję również na CodePen dla lepszej czytelności.

komentarz 26 listopada 2017 przez wimiiczwa Nowicjusz (100 p.)

Witam. Mam takie pytanie: A gdyby dodać jeszcze jeden button: <input type="button" value="2" id="przycisk2"/> w części html, następnie jeszcze jedną klasę w css np: .yellowColor{color:yellow;} to co trzeba by było zrobić w javascript poza: document.querySelector("#przycisk2").addEventListener("click", createStorageItem);

żeby ten drugi button zmieniał kolor liter na yellow przy zostawieniu tła czarnego.

Dodam, że dopiero zaczynam "zabawę" z pisaniem stron. Z góry dzięki za odpowiedź