JavaScript-vinduesmetoder forklaret med eksempler

Vinduesplaceringsmetode

Det window.locationobjekt kan bruges til at få oplysninger om den aktuelle side (URL) og at omdirigere browseren til en ny side.

Det window.locationobjekt kan skrives uden windowpræfiks, som bare location.

Nogle eksempler:

  • window.location.href returnerer href (URL) for den aktuelle side
  • window.location.hostname returnerer webhostens domænenavn
  • window.location.host returnerer både værtsnavnet og enhver tilknyttet port
  • window.location.pathname returnerer stien og filnavnet på den aktuelle side
  • window.location.protocol returnerer den anvendte webprotokol (http: eller https :)
  • window.location.assign() indlæser et nyt dokument

Mere information:

MDN

Window setInterval Method

Den setInterval()metode kalder en funktion eller evaluerer et udtryk med bestemte intervaller (i millisekunder).

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

Den setInterval()metode vil fortsætte kalde funktionen indtil clearInterval()kaldes, eller vinduet er lukket.

Den setInterval()metode kan yderligere parametre til funktionen, som vist i eksemplet nedenfor.

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

ID-værdien returneret af setInterval()bruges som parameter for clearInterval()metoden.

Tips:

  • 1000 ms = 1 sekund.
  • Brug setTimeout()metoden for at udføre en funktion kun en gang efter et angivet antal millisekunder .

Window setTimeout-metode

Den setTimeout()Metoden fastsætter en timer i millisekunder, så kalder en funktion eller evaluerer et udtryk, når timeren løber ud.

Bemærkninger:

  • setTimeout() bruger millisekunder, og 1000 ms er lig med 1 sekund
  • Denne metode udfører kun den funktion eller det udtryk, du sender til det en gang. Brug setInterval()metoden, hvis du har brug for at gentage udførelsen flere gange
  • Brug clearTimeout()metoden for at stoppe funktionen eller udtrykket, der sendes til den

Syntaksen for setTimout()metoden er som følger:

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

For eksempel:

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

En meget vigtig ting at huske på setTimeout()er, at den udføres asynkront:

console.log("A"); setTimeout(function() { console.log("B"); }, 0); console.log("C"); // The order in the console will be // A // C // B

Rækkefølgen af ​​konsollogfiler er sandsynligvis ikke, som du forventede. For at løse dette problem og sikre dig, at din kode udføres synkront, skal du bare rede den sidste console.logsætning i funktionen:

console.log("A"); setTimeout(function() { console.log("B"); console.log("C"); }, 0); // The order in the console will be // A // B // C

Window clearTimeout-metode

Den clearTimeout()fremgangsmåde er brugt stoppe en timer sæt med setTimeout()fremgangsmåden.

 clearTimeout(setTimeout_ID); 

For at kunne bruge clearTimeout()metoden skal du bruge en global variabel. Se eksemplet nedenfor

Den clearTimeout()metode virker ved hjælp af id, der er returneret af setTimeout(). På grund af dette er det ofte en god ide at bruge en global variabel til at gemme setTimeout(), og ryd derefter, når det er nødvendigt:

const myTimeout = setTimeout(function, milliseconds); ... // Later, to clear the timeout clearTimeout(myTimeout);

Window clearInterval Method

Den clearInterval()metode, der anvendes til at rydde en timer sæt med setInterval()fremgangsmåden.

clearInterval(setInteval_ID); 

Den clearTimeout()metode virker ved hjælp af id, der er returneret af setInterval(). På grund af dette er det ofte en god ide at bruge en global variabel til at gemme setInterval(), og ryd derefter, når det er nødvendigt:

const myInterval = setInterval(function, milliseconds); ... // Later, to clear the timeout clearInterval(myInterval);

Vindue localStorage Method

localStorage giver dine webapplikationer mulighed for at gemme nøgle / værdipar lokalt i brugerens browser.

Inden HTML5 og localStorage, måtte webappdata gemmes i cookies. Hver HTTP-anmodning inkluderer cookies, og disse var engang en legitim metode til lagring af applikationsdata lokalt på klientenheder. Imidlertid blev meget af de samme data transmitteret med cookies, og da de var begrænset til omkring 4 KB data, var det svært at gemme alt, hvad din applikation havde brug for.

The storage limit for localStorage is 10 MB of data per domain, and it is considered more efficient because the information stored in it is never transferred to the server with every request.

Types of Web Storage

localStorage is one of two modern methods for browsers to store data locally:

  • localStorage: This stores data with no expiration date. The data in localStorage persists even when the user’s browser is closed and reopened.
  • sessionStorage: This is similar to localStorage, except that it stores data for one session only. This data is removed once the user closes their browser.

HTML5 localStorage Methods

localStorage comes with a few different JavaScript methods that makes it very easy to work with.

To set data:

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

To retrieve some data from storage:

localStorage.getItem('Name');

To remove or delete some data:

localStorage.removeItem('Name');

To clear everything in storage (not just an individual item):

localStorage.clear();

To get the number of properties in storage:

localStorage.length;

Note: All of the methods above also work with sessionStorage. Simply replace localStorage with sessionStorage.

Window open Method

The Window open() method is used to open a new browser window or tab, depending on the parameters and the user's browser settings. This method is typically used for popups, and is blocked by default in a lot of modern browsers.

The syntax of the open() method is:

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

Parameters

  • url: A string for the resource you want to load.
  • windowName: A string indicating the target name of the new window or tab. Note that this will not be used as the title for the new window/tab.
  • windowFeatures: An optional comma-separated list of strings of features such as the size of the new window, its position, whether or not to display the menu bar, and so on.

Example

let windowObjectReference; const strWindowFeatures = "menubar=yes,location=yes,resizable=yes,scrollbars=yes,status=yes"; function openRequestedPopup() { windowObjectReference = window.open("//www.freecodecamp.org/", "fCC_WindowName", strWindowFeatures); } openRequestedPopup();

Ovenstående kode forsøger at åbne en popup til landingssiden for freeCodeCamp.

Vinduesbekræftelsesmetode

Du kan bruge confirmmetoden til at bede en bruger om at dobbelttjekke en beslutning på en webside. Når du kalder denne metode, viser browseren en dialogboks med to valg i retning af "OK" og "Annuller".

Sig for eksempel, at nogen lige har klikket på en Slet-knap. Du kan køre følgende kode:

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

Meddelelsen "Er du sikker på, at du vil slette dette element?" vises i dialogboksen. Hvis brugeren klikker OK, vender bekræftelsesmetoden tilbage, trueog browseren kører koden inde i if-sætningen. Hvis han eller hun klikker på Annuller, vender metoden tilbage, falseog der sker intet andet. Dette giver en vis beskyttelse mod nogen ved et uheld at klikke på Slet.