Narzędzia Deweloperskie w Przeglądarce: Ciasteczka i pliki lokalne

0:00W tej lekcji chciałbym krótko omówić panel Application którym możemy

0:04znaleźć tutaj i w nim znajdziesz wszystko co przeglądarka zapisuje lokalnie

0:08na twoim dysku może to być na przykład Local Storage czy Session Storage

0:13tutaj wszystko znajdziesz a więc jeżeli byśmy sobie przeszli na przykład do konsoli i

0:17wywołali sobie kody javascript normalnie byśmy to zrobili z poziomu javascriptu i napisali

0:22na przykład local storage set item tutaj

0:27podajemy klucz więc byłoby to na przykład first name i

0:31powiedzmy byłoby to jan to jeżeli

0:36coś takiego zapiszemy w locar strage dla tej domeny to w momencie kiedy przyjdziemy

0:40sobie tutaj do application zauważ że pod lokal storage to zobaczymy

0:44właśnie dla tej domeny jeżeli tutaj byłoby zapisane jeszcze dla innych domen to

0:49też moglibyśmy to zobaczyć jeżeli na przykład jakieś skrypt facebooka tutaj były wczytany i

0:53tak dalej i możemy sobie to tutaj edytować co jest bardzo ważne a także możemy

0:57na przykład usuwać więc wszystko co jest w local stotage czy w sesion storage tutaj

1:01znajdziesz natomiast jeżeli nie wiesz jak działa local storage czy sesion storage to

1:05odsyłam cię do mojego kursu gdzie dokładnie to tłumaczę link znajdziesz

1:10na linii czasu następną rzeczą którą tutaj mamy jest IndexedDB i Web SQL

1:14są to takie bazy danych które również są dostępne w wielu przeglądarkach

1:18więc jeżeli coś by w nich się znajdowało można to tutaj znaleźć edytować

1:22czy usunąć no i następną rzeczą są ciasteczka jak widzisz trochę ich tutaj

1:26mam zapisany dla localhosta ale to dlatego że na localhoście testuję

1:30różne strony więc tutaj pojawiają się ciasteczka gdzie dla każdego ciasteczka

1:34masz po prostu dokładne dane dla jakiej domeny został

1:38zapisany kiedy wygasa czyli Expires i tak dalej ciasteczka

1:43można również zaznaczyć i prawym przyciskiem wybrać Delete albo po prostu klawiszem Delete go

1:49usunąć następna rzecz to jest Cache Storage i Application

1:53Cache to są rzeczy związane z Progressive Web Apps czyli

1:58z PWA jeżeli będziesz takie apliacje tworzył tutaj znajdziesz również

2:02dane które one będą zapisywać i podobnie jeżeli chodzi o Background Services

2:06to jest również związane z aplikacjami typu Progressive Web Apps tutaj

2:10te rzeczy będą się znajdować więc tutaj naprawdę nie ma nic bardzo skomplikowanego

2:14Service Workers to również będzie dotyczyć PWA i jedyną

2:18rzeczą którą jeszcze tutaj warto omówić jest to Clear storage co pozwoli ci wyczyścić

2:23wszystkie dane jakie są dostępne tutaj możesz zaznaczyć co chcesz dokładnie

2:27wyczyścić klikasz Clear site data i dla tej konkretnej strony wszystkie

2:31dane zostaną wyczyszczone pokażę ci tylko jak można zastosować

2:35w praktyce przejście do tego panelu gdzie są ciasteczka i

2:39tak dalej wyobraź sobie że jesteś na jakiejś stronie i nie możesz się wylogować z jakiegoś powodu

2:43coś na stronie działa wyświetla się w konsoli jakiś błąd i tak dalej wystarczy wtedy

2:47że przejdziesz do zakładki Application do Cookies masz tutaj listę

2:52jak widzisz wszystkich ciasteczek dla wszystkich domen i znajdziesz ciasteczko z sesją

2:56ono się różnie może nazywać więc najlepiej usunąć wszystkie ale spróbujmy

3:00sobie po prostu tutaj kilka ciasteczek pousuwać odświeżam stronę i

3:05jak widzisz jestem już w wylogowany więc to takie jedno praktyczne zastosowanie

3:09co czasami tutaj możemy zrobić aczkolwiek przy pracy nad

3:13stronami możesz również wykorzystywać ten panel po to żeby zobaczyć czy ciasteczka

3:17które ty ustawiasz odpowiednio działają i tak dalej