Metoda de localizare a ferestrei

window.location obiectul poate fi folosit pentru a obține informații despre adresa curentă a paginii (URL) și pentru a redirecționa browserul către o pagină nouă.

window.location obiectul poate fi scris fără window prefix, ca doar location.

Cateva exemple:

  • window.location.href returnează href (URL) al paginii curente
  • window.location.hostname returnează numele de domeniu al gazdei web
  • window.location.host returnează atât numele gazdei, cât și orice port asociat
  • window.location.pathname returnează calea și numele fișierului paginii curente
  • window.location.protocol returnează protocolul web utilizat (http: sau https 🙂
  • window.location.assign() încarcă un document nou

Mai multe informatii:

MDN

Window setInterval Method

setInterval() metoda apelează o funcție sau evaluează o expresie la intervale specificate (în milisecunde).

setInterval(function(){ 
  alert("Hello");
}, 3000); 

setInterval() metoda va continua apelarea funcției până când clearInterval() este apelat sau fereastra este închisă.

setInterval() metoda poate transmite parametri suplimentari funcției, așa cum se arată în exemplul de mai jos.

setInterval(function, milliseconds, parameter1, parameter2, parameter3); 

Valoarea ID returnată de setInterval() este folosit ca parametru pentru clearInterval() metodă.

Sfaturi:

  • 1000 ms = 1 secundă.
  • Pentru a executa o funcție o singură dată, după un număr specificat de milisecunde, utilizați setTimeout() metodă.

Window setTimeout Method

setTimeout() metoda setează un cronometru în milisecunde, apoi apelează o funcție sau evaluează o expresie când cronometrul se termină.

Note:

  • setTimeout() folosește milisecunde, iar 1000 ms este egal cu 1 secundă
  • Această metodă execută funcția sau expresia pe care îi transmiteți o singură dată. Folosește setInterval() dacă trebuie să repetați execuția de mai multe ori
  • Pentru a opri funcția sau expresia care i-a fost transmisă, utilizați clearTimeout() metodă

Sintaxa setTimout() metoda este după cum urmează:

setTimeout(function, milliseconds, param1, param2, ...);

De exemplu:

setTimeout(function() { 
  alert("Hello");
}, 3000);

Un lucru foarte important de reținut setTimeout() este că este executat asincron:

console.log("A");
setTimeout(function() { console.log("B"); }, 0);
console.log("C");

// The order in the console will be
// A
// C
// B

Ordinea jurnalelor de consolă nu este probabil cea așteptată. Pentru a rezolva această problemă și a vă asigura că codul dvs. este executat sincron, trebuie doar să cuibăriți ultimul console.log declarație în funcția:

console.log("A");
setTimeout(function() {
    console.log("B");
    console.log("C");
}, 0);

// The order in the console will be
// A
// B
// C

Fereastra clearTimeout Method

clearTimeout() se utilizează metoda de oprire a unui temporizator setat cu setTimeout() metodă.

    clearTimeout(setTimeout_ID); 

Pentru a putea folosi clearTimeout() metoda, trebuie să utilizați o variabilă globală. Vedeți exemplul de mai jos

clearTimeout() metoda funcționează utilizând id-ul returnat de setTimeout(). Din această cauză, este adesea o idee bună să utilizați o variabilă globală pentru a stoca setTimeout(), apoi clar că, atunci când este necesar:

const myTimeout = setTimeout(function, milliseconds);

...

// Later, to clear the timeout
clearTimeout(myTimeout);

Fereastra clearInterval Method

clearInterval() metoda este utilizată pentru a șterge un set de temporizator cu setInterval() metodă.

clearInterval(setInteval_ID); 

clearTimeout() metoda funcționează utilizând id-ul returnat de setInterval(). Din această cauză, este adesea o idee bună să utilizați o variabilă globală pentru a stoca setInterval(), apoi clar că, atunci când este necesar:

const myInterval = setInterval(function, milliseconds);

...

// Later, to clear the timeout
clearInterval(myInterval);

Window localStorage Method

localStorage oferă o modalitate prin care aplicațiile dvs. web pot stoca perechi cheie / valoare la nivel local în browserul utilizatorului.

Înainte de HTML5 și localStorage, datele aplicațiilor web trebuiau stocate în cookie-uri. Fiecare solicitare HTTP include cookie-uri, iar acestea au fost odată o metodă legitimă pentru stocarea locală a datelor aplicațiilor pe dispozitivele client. Cu toate acestea, o mulțime de aceleași date erau transmise cu cookie-uri și, deoarece acestea erau limitate la aproximativ 4 KB de date, era dificil să stochezi tot ce avea nevoie aplicația ta.

Limita de stocare pentru localStorage este de 10 MB de date pe domeniu și este considerat mai eficient deoarece informațiile stocate în acesta nu sunt transferate niciodată la server cu fiecare cerere.

Tipuri de stocare web

localStorage este una dintre cele două metode moderne pentru ca browserele să stocheze date local:

  • localStorage: Aceasta stochează date fără o dată de expirare. Datele din localStorage persistă chiar și atunci când browserul utilizatorului este închis și redeschis.
  • sessionStorage: Acest lucru este similar cu localStorage, cu excepția faptului că stochează date pentru o singură sesiune. Aceste date sunt eliminate după ce utilizatorul își închide browserul.

Metode HTML5 localStorage

localStorage vine cu câteva metode JavaScript diferite, ceea ce face foarte ușor de utilizat.

Pentru a seta date:

localStorage.setItem('Name', 'somevalue');

Pentru a prelua unele date din stocare:

localStorage.getItem('Name');

Pentru a elimina sau șterge unele date:

localStorage.removeItem('Name');

Pentru a șterge totul din stocare (nu doar un articol individual):

localStorage.clear();

Pentru a obține numărul de proprietăți stocate:

localStorage.length;

Notă: Toate metodele de mai sus funcționează și cu sessionStorage. Pur și simplu înlocuiți localStorage cu sessionStorage.

Metoda de deschidere a ferestrei

Fereastra open() metoda este utilizată pentru a deschide o nouă fereastră sau filă a browserului, în funcție de parametri și de setările browserului utilizatorului. Această metodă este de obicei utilizată pentru ferestre pop-up și este blocată implicit în multe browsere moderne.

Sintaxa open() metoda este:

const window =  window.open(url, windowName, windowFeatures);

Parametrii

  • url: Un șir pentru resursa pe care doriți să o încărcați.
  • windowName: Un șir care indică numele țintei pentru noua fereastră sau filă. Rețineți că acest lucru nu va fi folosit ca titlu pentru noua fereastră / filă.
  • windowFeatures: O listă opțională separată prin virgule de șiruri de caracteristici, cum ar fi dimensiunea ferestrei noi, poziția acesteia, dacă se afișează sau nu bara de meniu și așa mai departe.

Exemplu

let windowObjectReference;
const strWindowFeatures = "menubar=yes,location=yes,resizable=yes,scrollbars=yes,status=yes";

function openRequestedPopup() {
  windowObjectReference = window.open("https://www.freecodecamp.org/", "fCC_WindowName", strWindowFeatures);
}

openRequestedPopup();

Codul de mai sus va încerca să deschidă un popup pe pagina de destinație Routech.

Metoda de confirmare a ferestrei

Puteți utiliza confirm metoda de a solicita unui utilizator să verifice de două ori o decizie pe o pagină web. Când apelați această metodă, browserul va afișa o casetă de dialog cu două opțiuni de-a lungul liniilor „OK” și „Anulare”.

De exemplu, să presupunem că cineva tocmai a dat clic pe un buton Ștergere. Puteți rula următorul cod:

if (window.confirm("Are you sure you want to delete this item?")) {
  // Delete the item
}

Mesajul „Sigur doriți să ștergeți acest element?” va apărea în caseta de dialog. Dacă utilizatorul dă clic pe OK, metoda de confirmare va reveni true iar browserul va rula codul în instrucțiunea if. Dacă el sau ea dă clic pe Anulare, metoda va reveni false și nimic altceva nu se va întâmpla. Acest lucru oferă o anumită protecție împotriva unei persoane care face clic accidental pe Ștergere.