Meta tags:
description=Erfahren Sie, wie die JavaScript History API die Browser-History manipuliert und SPAs ohne Seitenneuladen ermöglicht.;

Headings (most frequently used words):

history, api, die, javascript, in, verwendung, der, einführung, warum, existiert, das, objekt, auf, einen, blick, webanwendungen, typische, fallstricke, best, practices, für, fazit, übungen, navigation, zwischen, zuständen, umgang, mit, dem, popstate, ereignis, den, aktuellen, zustand, ersetzen, vollständiges, spa, beispiel,

Text of the page (most frequently used words):
history (73), und (72), die (54), api (47), state (43), der (40), das (33), sie (30), page (27), den (23), #javascript (22), url (20), dom (20), button (19), pushstate (17), einen (16), the (16), lernen (15), popstate (15), wird (14), zurück (14), function (14), des (13), mit (13), ein (13), event (13), html (12), auf (11), browser (11), document (11), für (10), eintrag (10), methoden (10), replacestate (10), wenn (9), ohne (9), object (9), title (9), aktuellen (9), status (9), web (8), seite (8), ist (8), vor (8), div (8), objekt (7), ermöglicht (7), oder (7), navigation (7), forward (7), back (7), content (7), stapel (7), new (7), tools (6), einführung (6), einträge (6), ereignis (6), zum (6), zustand (6), benutzer (6), neuen (6), übergeben (6), script (6), getelementbyid (6), replace (6), and (6), window (6), onclick (6), string (6), w3docs (5), übungen (5), this (5), was (5), ändern (5), von (5), dem (5), laden (5), fetch (5), aktualisiert (5), muss (5), inhalt (5), kopieren (5), newstate (5), events (5), formatter (5), color (5), alle (4), über (4), json (4), generator (4), css (4), verwendung (4), fallstricke (4), sich (4), können (4), origin (4), wie (4), length (4), damit (4), nicht (4), aktualisieren (4), einer (4), selbst (4), ignoriert (4), eine (4), ihre (4), spas (4), neu (4), daher (4), funktionen (4), eines (4), loadpage (4), start (4), eintrags (4), shadow (4), async (4), entwickler (3), code (3), encoder (3), editor (3), quizze (3), php (3), best (3), practices (3), typische (3), console (3), ausgelöst (3), ändert (3), funktionalitäten (3), beim (3), zwischen (3), ihnen (3), sitzungshistorie (3), browsers (3), manipulieren (3), reagieren (3), same (3), urls (3), single (3), nur (3), verwenden (3), fallback (3), scroll (3), scrollen (3), spa (3), diese (3), sein (3), dokument (3), tab (3), löst (3), aus (3), rendern (3), kein (3), buttons (3), listener (3), seiten (3), textcontent (3), historystatus (3), updatehistorystatus (3), display (3), current (3), innerhtml (3), update (3), const (3), load (3), muster (3), wurde (3), replaced (3), dieser (3), ereignisse (3), flag (3), data (3), objekte (3), eigenschaften (3), promise (3), operatoren (3), italiano (2), português (2), español (2), français (2), русский (2), deutsch (2), english (2), beautifier (2), diff (2), password (2), probier (2), python (2), java (2), git (2), bücher (2), snippets (2), fazit (2), webanwendungen (2), blick (2), warum (2), existiert (2), screen (2), orientation (2), prüfen (2), ereignisses (2), bietet (2), serverseitige (2), hinzugefügt (2), werden (2), seitenneuladezyklen (2), auslösen (2), neuladen (2), welche (2), folgenden (2), aussagen (2), beschreiben (2), hinzuzufügen (2), ersetzen (2), sowie (2), anwendungen (2), schnell (2), jede (2), aktuelle (2), anzahl (2), sitzungsstapel (2), per (2), weiterhin (2), funktioniert (2), stellen (2), bei (2), setzen (2), steuern (2), möchten (2), apis (2), unter (2), fenstergrößen (2), position (2), argument (2), rest (2), server (2), pfad (2), problem (2), müssen (2), knoten (2), gibt (2), einige (2), relativ (2), aufgelöst (2), einem (2), neue (2), ansicht (2), funktion (2), vollständigen (2), passenden (2), null (2), body (2), manualgoforward (2), manually (2), trigger (2), going (2), manualgoback (2), updates (2), when (2), addeventlistener (2), head (2), nun (2), folgende (2), beispiel (2), anwendung (2), ort (2), stelle (2), zuvor (2), schritt (2), replacecurrentstate (2), reagiert (2), hat (2), durch (2), vorwärts (2), eigenschaft (2), neuer (2), adressleiste (2), push (2), stack (2), changestate (2), change (2), zuständen (2), drei (2), hinzu (2), geht (2), schreibgeschützte (2), lesen (2), workers (2), file (2), suche (2), quantoren (2), anker (2), flags (2), components (2), animationen (2), microtasks (2), formulare (2), benutzerdefinierte (2), styles (2), klassen (2), arrays (2), generatoren (2), advanced (2), await (2), fehlerbehandlung (2), promises (2), chaining (2), error (2), erweitern (2), handling (2), class (2), prototypes (2), interaktive (2), elemente (2), property (2), arrow (2), syntax (2), variablen (2), functions (2), objects (2), hash (2), 2026, rechte, vorbehalten, gemacht, sprache, datenschutzrichtlinie, kontakt, uns, unternehmen, üben, kostenlose, tutorials, beispiele, seit, 2014, next, previous, yes, helpful, verarbeitung, aktive, datenspeicherung, geändert, kann, navigieren, einträgen, übung, vollständige, beherrschen, kennen, rund, serialisierung, navigierbar, erscheinen, lässt, traditionelle, mehrseitige, websites, ergänzt, natürlich, daten, benötigt, nutzen, filter, tabs, sinnvoll, bleibt, navigatorische, aktualisierungen, teilen, gesetzten, serverseitigen, bereit, wieder, her, weitere, finden, manual, scrollrestoration, verwalten, wechselt, stets, speichern, bezeichner, wenige, primitive, werte, leiten, keine, großen, datensätze, dumpen, bläht, sitzung, riskiert, überschreiten, größenlimits, halten, klein, gesetzte, diesen, antworten, ihn, verarbeiten, sonst, erhalten, 404, lösung, routing, lösen, seitenneuladung, startet, app, structured, clone, algorithmus, geklont, klasseninstanzen, gespeichert, größenlimit, üblicherweise, serialisierbar, cross, wirft, securityerror, fast, jeder, titel, direkt, benutzernavigation, nach, derselben, verhaltensweisen, überraschen, regelmäßig, mehrseitiges, feeling, einzigen, neuladevorgang, erzeugt, vertraute, benutzeroberfläche, liest, rendert, startseite, zurückgefallen, wiederherstellung, ruft, sodass, echter, stopp, dynamisches, does, not, have, any, else, navigating, through, handles, actions, pushing, pushed, loads, page2, page1, for, with, style, example, utf, charset, meta, lang, doctype, bringen, wir, alles, zusammen, simuliert, klick, tauscht, während, richtigen, wiederherstellt, navigiert, dies, dasselbe, clientseitiger, router, intern, verwendet, vollständiges, führt, aufgerufen, keinen, hinzufügt, successfully, replacedstate, ready, manchmal, datensatz, anzulegen, etwa, synchronisieren, filters, auswahl, zusätzlicher, störend, wäre, dafür, gedacht, protokolliert, änderungen, anpassung, zustands, anhand, navigationshistorie, benutzers, zurücknavigiert, normalen, seitenaufruf, erstellt, nie, zeigen, dann, standardansicht, handle, here, changed, log, klickt, aufrufen, enthält, aktivierten, haben, darauf, richtige, wiederherzustellen, umgang, beachten, dabei, passiert, geladen, inhalts, aufgabe, verschiedenen, nimmt, argumente, entgegen, beliebiger, serialisierbarer, wert, meisten, browsern, leeren, zur, fügen, springt, negativ, positiv, entspricht, kopie, objekts, ersetzt, stapeleintrag, angelegt, fügt, member, globale, bereitgestellt, auch, einfach, schreiben, datenzustand, viele, befinden, aufbau, nützlicher, begleiter, tasten, bewegt, hinzufügen, dieses, indem, möglichkeiten, war, einzige, möglichkeit, gesamte, lud, synchron, bleiben, andernfalls, sind, lesezeichen, teilbare, links, funktionslos, behandelt, kernmethoden, navigations, hilfsmethoden, man, produktiven, einsatz, modernen, webentwicklung, erfordert, schaffen, nahtloser, benutzererfahrungen, häufig, also, liste, zustände, besucht, genau, benötigen, nativ, wirken, seitenneuladevorgang, auszulösen, erfahren, manipuliert, seitenneuladen, intl, vibration, notifications, audio, webrtc, geolocation, websockets, service, midi, storage, validation, fullscreen, webgl, battery, animations, regexp, sticky, katastrophales, backtracking, lookahead, lookbehind, alternation, rückwärtsreferenzen, name, erfassungsgruppen, gierige, faule, sets, ranges, escaping, sonderzeichen, wortgrenze, mehrzeiliger, modus, anfang, ende, unicode, klasse, zeichenklassen, regex, regular, expressions, styling, slots, komposition, template, element, custom, elements, animation, indexeddb, localstorage, sessionstorage, cookies, cookie, storing, wiederaufnehmbarer, dateiupload, sent, xmlhttprequest, ursprungsübergreifende, anfragen, abbruch, download, fortschritt, formdata, network, requests, canvas, references, loop, macrotasks, selection, range, resizeobserver, intersectionobserver, mutation, observer, various, ressourcen, onload, onerror, scripts, defer, domcontentloaded, beforeunload, unload, resource, loading, methode, submit, clipboard, input, cut, copy, paste, fokussierung, focus, blur, formulareigenschaften, forms, controls, scrolling, tastatur, keydown, keyup, drag, drop, mausbewegungen, mausereignisse, grundlagen, standard, browseraktionen, delegation, bubbling, capturing, introduction, koordinaten, verändern, attribute, knoteneigenschaften, typ, tag, getelement, queryselector, browserumgebung, spezifikationen, streams, filereader, blob, textdecoder, textencoder, arraybuffer, binäre, binary, files, fensterübergreifende, kommunikation, popups, frames, windows, polyfills, transpiler, bigint, currying, eval, proxy, reflect, miscellaneous, dynamische, imports, export, import, module, modules, iteratoren, generators, iteration, promisification, callbacks, fehler, try, catch, mixins, checking, instanceof, eingebaute, private, geschützte, statische, klassenvererbung, grundsyntax, classes, prototyp, __proto__, native, prototypale, vererbung, inheritance, widgets, performance, optimierung, debugging, barrierefreiheit, kompatibilität, manipulationsbibliotheken, fortgeschrittene, techniken, manipulationstechniken, traversieren, arbeiten, auswählen, getter, setter, deskriptoren, properties, configuration, closures, vertieft, binding, debounce, throttle, dekoratoren, weiterleitung, call, apply, settimeout, setinterval, nfe, globales, alte, var, scope, parameter, spread, rekursion, tojson, datum, uhrzeit, destructuring, assignment, keys, values, entries, weakmap, weakset, map, set, iterables, array, strings, math, zahlen, primitiven, types, optional, konstruktor, operator, primitiv, konvertierung, symbol, typen, garbage, collection, objektmethoden, basics, es6, funktionsausdrücke, schleifen, switch, bedingte, nullish, coalescing, logische, vergleichsoperatoren, typkonvertierungen, datentypen, use, strict, kommentare, basic, anmelden, durchsuchen, formatters, reverse, sha256, md5, calculator, colors, hsl, hex, mixer, converter, picker, general, kurse,

Text of the page (random words):
ve funktionen js operatoren js vergleichsoperatoren js logische operatoren js nullish coalescing js bedingte operatoren js switch js schleifen js funktionen js funktionsausdrücke js arrow functions js es6 objects the basics js objects js objekte kopieren js objektmethoden this js garbage collection js symbol typen js objekt zu primitiv konvertierung js konstruktor operator new js optional chaining data types js methoden von primitiven js zahlen js math js strings js arrays js array methoden js iterables js map und set js weakmap und weakset js object keys values entries js destructuring assignment js datum und uhrzeit js json methoden tojson advanced functions js rekursion und stack js rest parameter und spread syntax js variablen scope js das alte var js globales objekt js function objekt nfe js die new function syntax js settimeout und setinterval js dekoratoren und weiterleitung call apply js debounce throttle js function binding js arrow funktionen vertieft js closures object properties configuration js property flags und deskriptoren js property getter und setter javascript html dom dom einführung die dom knoten dom elemente auswählen den dom manipulieren arbeiten mit styles im dom event handling im dom dom traversieren dom manipulationstechniken formulare im dom verwenden fortgeschrittene dom techniken dom manipulationsbibliotheken dom browser kompatibilität dom barrierefreiheit debugging und tools performance optimierung interaktive elemente und widgets prototypes inheritance js prototypale vererbung js native prototypes js prototyp methoden objekte ohne __proto__ classes js class grundsyntax js klassenvererbung statische eigenschaften und methoden private und geschützte eigenschaften in js js eingebaute klassen erweitern js class checking instanceof js mixins error handling js fehlerbehandlung try catch js benutzerdefinierte fehler error erweitern promises async await js einführung callbacks js promise js promise chaining js fehlerbehandlung mit promises promise api promisification microtasks async await generators advanced iteration generatoren async iteratoren und generatoren modules module export und import dynamische imports miscellaneous proxy und reflect eval currying bigint js polyfills transpiler frames and windows popups und window methoden fensterübergreifende kommunikation binary data files arraybuffer binäre arrays textdecoder und textencoder blob file und filereader js streams api document browserumgebung spezifikationen suche getelement queryselector knoteneigenschaften typ tag und inhalt attribute und eigenschaften das dokument verändern styles und klassen fenstergrößen und scrollen koordinaten introduction to events javascript einführung in browser ereignisse bubbling und capturing event delegation standard browseraktionen benutzerdefinierte ereignisse auslösen ui events mausereignisse grundlagen mausbewegungen drag and drop tastatur keydown und keyup scrolling forms controls formulareigenschaften und methoden fokussierung focus blur events change input cut copy paste js clipboard api formulare ereignis und methode submit document and resource loading page domcontentloaded load beforeunload unload scripts async defer ressourcen laden onload und onerror various mutation observer js intersectionobserver js resizeobserver selection und range event loop microtasks und macrotasks javascript references canvas network requests fetch api formdata fetch download fortschritt fetch abbruch fetch ursprungsübergreifende anfragen url objekte xmlhttprequest js server sent events wiederaufnehmbarer dateiupload storing data in the browser cookies document cookie localstorage sessionstorage indexeddb animation css animationen javascript animationen web components web components custom elements shadow dom template element shadow dom slots komposition shadow dom styling shadow dom und events regular expressions js regex muster und flags zeichenklassen unicode flag u und klasse p anker string anfang und ende mehrzeiliger modus der anker flag m wortgrenze b escaping sonderzeichen sets und ranges quantoren und n gierige und faule quantoren erfassungsgruppen rückwärtsreferenzen im muster n und k name javascript alternation or lookahead und lookbehind katastrophales backtracking sticky flag y suche an position methoden von regexp und string javascript apis web animations api file api battery api webgl push api screen orientation api history api console api fullscreen api validation api web storage api web midi api js web workers service workers websockets geolocation webrtc web audio api notifications api die vibration api js intl api javascript history api erfahren sie wie die javascript history api die browser history manipuliert und spas ohne seitenneuladen ermöglicht einführung in die javascript history api in der modernen webentwicklung erfordert das schaffen nahtloser benutzererfahrungen häufig das manipulieren der browser history die javascript history api ermöglicht es ihnen die sitzungshistorie des browsers zu lesen und zu ändern also die liste der seiten und url zustände die der benutzer im aktuellen tab besucht hat mit dieser api können entwickler die adressleiste und den vor zurück stapel aktualisieren ohne einen vollständigen seitenneuladevorgang auszulösen genau das was single page anwendungen spas benötigen um schnell und nativ zu wirken diese seite behandelt die drei kernmethoden pushstate replacestate und die navigations hilfsmethoden wie man auf das popstate ereignis reagiert typische fallstricke sowie best practices für den produktiven einsatz der api warum die history api existiert vor dieser api war die einzige möglichkeit die url zu ändern die navigation die das gesamte dokument neu lud spas rendern neue seiten mit javascript daher muss die url synchron bleiben ohne neuladen andernfalls sind der zurück button lesezeichen und teilbare links funktionslos die history api löst dieses problem indem sie ihnen folgende möglichkeiten bietet hinzufügen eines neuen eintrags zum vor zurück stapel pushstate ändern des aktuellen eintrags an ort und stelle replacestate reagieren wenn der benutzer sich mit den vor zurück tasten durch den stapel bewegt popstate den datenzustand des aktuellen eintrags lesen sie über die schreibgeschützte eigenschaft history state und history length gibt an wie viele einträge sich im sitzungsstapel befinden zum aufbau der urls die sie an diese methoden übergeben ist das url objekt ein nützlicher begleiter das history objekt auf einen blick die api wird über das globale window history objekt bereitgestellt sie können auch einfach history schreiben member funktion history pushstate state title url fügt einen neuen eintrag zum history stapel hinzu und aktualisiert die url history replacestate state title url ersetzt den aktuellen eintrag es wird kein neuer stapeleintrag angelegt history state schreibgeschützte kopie des state objekts des aktuellen eintrags history length anzahl der einträge in der sitzungshistorie history back geht einen eintrag zurück entspricht dem browser zurück button history forward geht einen eintrag vor history go n springt n einträge negativ zurück positiv vorwärts verwendung der history api in webanwendungen navigation zwischen zuständen die history api ermöglicht die navigation zwischen verschiedenen zuständen einer anwendung ohne die seite neu zu laden pushstate nimmt drei argumente entgegen ein state object ein beliebiger serialisierbarer wert einen title von den meisten browsern ignoriert übergeben sie daher einen leeren string und eine url relativ zur aktuellen seite aufgelöst und muss same origin sein so fügen sie einen neuen zustand hinzu div button onclick changestate go to new state button div script function to change state function changestate const newstate id newstate push a new state to the history stack window history pushstate newstate new state new state url script kopieren damit wird ein neuer zustand mit pushstate zum history stapel hinzugefügt beachten sie was dabei nicht passiert new state url wird nicht geladen und kein popstate ereignis wird ausgelöst pushstate aktualisiert nur die adressleiste und den stapel das rendern des passenden inhalts ist ihre aufgabe umgang mit dem popstate ereignis wenn der benutzer auf den zurück oder vorwärts button des browsers klickt oder sie history back history forward aufrufen wird das popstate ereignis ausgelöst die state eigenschaft des ereignisses enthält das state object das sie zuvor für den nun aktivierten eintrag an pushstate replacestate übergeben haben reagieren sie darauf um die richtige ansicht wiederherzustellen window addeventlistener popstate function event if event state console log state changed event state handle the state object here kopieren dieser listener reagiert auf popstate ereignisse protokolliert änderungen und ermöglicht die anpassung des zustands anhand der navigationshistorie des benutzers wenn event state null ist hat der benutzer zu einem eintrag zurücknavigiert der durch einen normalen seitenaufruf erstellt wurde dem nie ein state object übergeben wurde zeigen sie dann ihre standardansicht an den aktuellen zustand ersetzen manchmal möchten sie den aktuellen eintrag aktualisieren ohne einen neuen datensatz im stapel anzulegen etwa beim synchronisieren eines filters oder einer tab auswahl in die url wo ein zusätzlicher zurück schritt störend wäre dafür ist replacestate gedacht div button onclick replacecurrentstate replace state button p id replace status ready p div script function replacecurrentstate const newstate id replacedstate replace the current state window history replacestate newstate replaced state replaced state url document getelementbyid replace status textcontent state replaced successfully script kopieren damit wird der aktuelle eintrag an ort und stelle aktualisiert der zurück button führt weiterhin zu der seite die zuvor aufgerufen wurde da replacestate keinen neuen schritt hinzufügt vollständiges spa beispiel bringen wir nun alles zusammen das folgende beispiel simuliert eine single page anwendung ein button klick tauscht den inhalt eines div aus und aktualisiert die url mit pushstate während ein popstate listener den richtigen inhalt wiederherstellt wenn der benutzer mit den vor zurück buttons navigiert dies ist dasselbe muster das ein clientseitiger router intern verwendet doctype html html lang en head meta charset utf 8 title spa style history api example title head body h1 page navigation with history api h1 div id content start page div buttons for navigation button onclick loadpage page1 load page 1 button button onclick loadpage page2 load page 2 button button onclick manualgoback go back button button onclick manualgoforward go forward button display the current status of the history p id historystatus history status start p script loads a page and updates the browser s history state function loadpage page const state page page state to be pushed to history history pushstate state page page page html pushing state to the history document getelementbyid content innerhtml h2 this is page replace page page h2 update the content updatehistorystatus state update the history status display handles the browser s back and forward button actions window addeventlistener popstate function event if event state update the page content and history status when navigating through history document getelementbyid content innerhtml h2 this is event state page replace page page h2 updatehistorystatus event state else fallback content when the history does not have any state document getelementbyid content innerhtml h2 start page h2 document getelementbyid historystatus textcontent history status start updates the display of the current history status function updatehistorystatus state document getelementbyid historystatus textcontent history status state page function to manually trigger going back in history function manualgoback history back function to manually trigger going forward in history function manualgoforward history forward script body html kopieren probier es selbst so funktioniert es dynamisches laden von seiten loadpage ändert den inhalt eines div und ruft pushstate auf um einen history eintrag hinzuzufügen sodass jede seite ein echter vor zurück stopp wird wiederherstellung bei navigation der popstate listener liest event state page und rendert den passenden inhalt neu wenn event state null ist wird auf die startseite zurückgefallen vertraute benutzeroberfläche die buttons steuern history back und history forward was ein mehrseitiges feeling ohne einen einzigen vollständigen neuladevorgang erzeugt typische fallstricke einige verhaltensweisen überraschen entwickler regelmäßig pushstate löst kein popstate aus nur benutzernavigation vor zurück history go löst es aus nach einem pushstate rendern sie die neue ansicht selbst in derselben funktion das title argument wird ignoriert fast jeder browser ignoriert es übergeben sie daher um den tab titel zu ändern setzen sie document title direkt urls müssen same origin sein das übergeben einer cross origin url wirft einen securityerror der pfad wird relativ zum aktuellen dokument aufgelöst der zustand muss serialisierbar sein das state object wird mit dem structured clone algorithmus geklont daher können funktionen dom knoten und klasseninstanzen nicht gespeichert werden und es gibt ein größenlimit üblicherweise einige mb ein seitenneuladung startet ihre app unter der neuen url neu wenn der benutzer eine per pushstate gesetzte url aktualisiert muss der server auf diesen pfad antworten oder ihre spa muss ihn beim laden verarbeiten sonst erhalten sie eine 404 diese serverseitige fallback lösung ist das routing problem das spas lösen müssen best practices für die verwendung der history api halten sie den zustand klein speichern sie einen bezeichner oder wenige primitive werte im state object und leiten sie den rest ab keine großen datensätze in die history dumpen das bläht die sitzung auf und riskiert das überschreiten des größenlimits aktualisieren sie document title stets selbst wenn die seite wechselt da das title argument ignoriert wird scroll position verwalten browser stellen den scroll zustand bei popstate über history scrollrestoration wieder her setzen sie es auf manual wenn sie das scrollen selbst steuern möchten weitere scroll apis finden sie unter fenstergrößen und scrollen stellen sie einen serverseitigen fallback bereit damit das aktualisieren oder teilen einer per pushstate gesetzten url weiterhin funktioniert verwenden sie replacestate für nicht navigatorische aktualisierungen filter tabs damit der zurück button sinnvoll bleibt history prüfen nutzen sie history state für das aktuelle state object und history length für die anzahl der einträge im sitzungsstapel da die history api nur die url ändert ergänzt sie sich natürlich mit fetch zum laden der daten die jede seite benötigt fazit die javascript history api ermöglicht es ihnen die sitzungshistorie des browsers zu manipulieren einträge hin...