Clientseitiger Speicher ist für Webanwendungen unerlässlich. Es ist vielleicht nicht so kugelsicher wie serverseitiger Speicher, aber ohne es könnten Web-Apps viele moderne Funktionen nicht implementieren. Alle Arten von Funktionen hängen von der clientseitigen Speicherung ab, von Sitzungen in Spielen bis hin zu Einkaufswagen auf E-Commerce-Websites.

Die clientseitige Speicherung ermöglicht es Web-Apps auch, eine datenschutzzentrierte Architektur zu implementieren. Sie können es verwenden, um sicherzustellen, dass vertrauliche Daten niemals das Gerät eines Benutzers verlassen.

Was ist clientseitiger Speicher?

In der Webentwicklung bezieht sich die clientseitige Speicherung auf die verschiedenen Möglichkeiten, wie Webbrowser Daten speichern können. Eine Anwendung kann diese Daten dann verwenden, um Benutzern Funktionen bereitzustellen. Die clientseitige Speicherung ist aus mehreren Gründen kritisch:

  • Der Zugriff auf auf dem Client gespeicherte Daten ist erheblich schneller, und Ihre App kann ohne Internet darauf zugreifen.
    • instagram viewer
  • Die clientseitige Speicherung macht es Ihrer Anwendung einfacher, sich an die Einstellungen jedes Benutzers zu erinnern.
  • Das dauerhafte Speichern einiger Daten auf dem Client erleichtert den Schutz der Privatsphäre der Benutzer.
  • Das Speichern aller Anwendungsdaten auf dem Server ist teuer, insbesondere bei großen Mengen.

Es gibt verschiedene Formen der clientseitigen Speicherung, die Sie in Ihren Web-Apps verwenden können.

Kekse

Ein Browser-Cookie ist ein Stück Schlüssel/Wert-Daten, das als Zeichenfolge auf Ihrem Computer gespeichert wird. Browser senden bei jeder Anfrage alle Cookies für eine bestimmte Site an den Server der Site. Cookies waren die erste (und für eine Weile einzige) Art der clientseitigen Speicherung.

Es gibt keine offizielle Begrenzung für die Größe eines Cookies, aber einzelne Browser legen unterschiedliche Grenzen für die Größe und Anzahl der Cookies fest, die Sie festlegen können. Das RFC 6265 Abschnitt 6.1 gibt die folgenden minimalen Cookie-Funktionen an, die Browser (Benutzeragenten) bereitstellen sollten:

Praktische Implementierungen von Benutzeragenten haben Beschränkungen hinsichtlich der Anzahl und Größe der Cookies, die sie speichern können. Benutzeragenten für allgemeine Zwecke SOLLTEN jede der folgenden Mindestfunktionen bieten:

  • Mindestens 4096 Bytes pro Cookie (gemessen an der Summe der Länge von Name, Wert und Attributen des Cookies).
  • Mindestens 50 Cookies pro Domain.
  • Insgesamt mindestens 3000 Cookies.

Cookies können unterschiedlich lange im Browser verbleiben. Einige laufen am Ende einer Seitensitzung ab, und einige haben willkürliche Ablaufdaten, die sich bis zu Monaten in die Zukunft erstrecken können.

Browser erstellen eine Seitensitzung, wenn Sie eine neue Registerkarte öffnen, und beenden sie, wenn Sie die Registerkarte oder den Browser schließen. Wenn Sie die Seite neu laden oder aktualisieren, beendet der Browser die Seitensitzung nicht.

Anwendungsfälle für Cookies

Cookies eignen sich am besten zum Speichern kleiner Datenmengen, die der Server häufig lesen oder ändern muss. Wieso den?

  • Cookies werden automatisch an alle Netzwerkanfragen angehängt
  • Cookies können nur kleine Mengen an Zeichenfolgedaten speichern.

Sie können Cookies verwenden, um einen Benutzer zu identifizieren (wie eine Sitzungs-ID), einen Seitenbesuch zu Lesezeichenzwecken aufzuzeichnen oder den Highscore eines Spiels zu speichern.

Lokaler Speicher

Wie ein Cookie ist localStorage ein Schlüssel/Wert-Speicher, der Zeichenfolgendaten speichert. Während beide Speichertypen ähnlich sind, unterscheiden sich localStorage und Cookies in mehreren Punkten:

  • LocalStorage ist abhängig von JavaScript.
  • Daten in localStorage befinden sich hauptsächlich im Browser. Sie müssen es bewusst an den Server senden, anstatt dass der Browser es bei jeder Anfrage sendet.
  • LocalStorage hat kein Ablaufdatum. Es bleibt auf dem Client bestehen, bis ein Entwickler es mit JavaScript löscht oder der Benutzer seinen Browserspeicher löscht.
  • LocalStorage hat eine viel größere Speicherkapazität. Das WHATWG-Spez gibt kein hartes Limit an, aber gem Wikipedia, beträgt die Mindestgröße von localStorage bei den wichtigsten Browsern 5 MB:

Browser beschränken Cookies auf 4 Kilobyte. Der Webspeicher bietet eine weitaus größere Speicherkapazität:

  • Opera 10.50+ erlaubt 5 MB
  • Safari 8 erlaubt 5 MB
  • Firefox 34 erlaubt 10 MB
  • Google Chrome erlaubt 10 MB pro Ursprung
  • Internet Explorer erlaubt 10 MB pro Speicherbereich

Anwendungsfälle für LocalStorage

LocalStorage eignet sich perfekt zum Speichern großer Datenmengen, auf die der Server selten zugreifen muss. Dies können die Benutzereinstellungen einer Anwendung, Designkonfigurationsdetails oder die Daten in einem kürzlich ausgefüllten Formular sein. Dies liegt daran, dass localStorage ein viel größeres Speicherlimit als Cookies hat, aber Sie müssen zusätzliche Anstrengungen unternehmen, um seine Daten an den Server zu senden.

Wenn Sie die Daten als JSON speichern, können Sie relativ komplexe Daten mit localStorage speichern, obwohl es nur Zeichenfolgen speichern kann.

LocalStorage ist anfällig für XSS-Angriffe, daher sollten Sie darin keine vertraulichen Kundendaten speichern.

Sitzungsspeicher

SessionStorage ist ein Key/Value Store, der funktioniert fast das gleiche wie localStorage, Außer eine Sache. Die gespeicherten Daten bleiben nur für die Dauer einer Seitensitzung bestehen.

Anwendungsfälle für SessionStorage

Sie können SessionStorage verwenden, um den gleichen Datentyp wie localStorage zu speichern, aber nur, wenn die Daten nicht über eine Seitensitzung hinaus bestehen bleiben müssen.

IndexedDB

IndexedDB ist eine leistungsstarke Browser-API zum Speichern großer Mengen strukturierter Daten. Es ist eine transaktionale, objektorientierte Datenbank, die Daten in Schlüssel/Wert-Paaren speichert.

Bei kleineren Datenmengen ist localStorage/sessionStorage die bessere und einfachere Wahl. Leider sind sie durch ihre Speicherkapazität und die Tatsache, dass sie nur Zeichenfolgendaten speichern können, begrenzt. IndexedDB ermöglicht nicht nur das Speichern verschiedener Datentypen, einschließlich Dateien/Binärdaten, sondern kann auch viel mehr Daten speichern. IndexedDB erstellt auch Indizes seines Inhalts, um ein schnelles Durchsuchen der Datenbank zu ermöglichen.

Anwendungsfälle für IndexedDB

IndexedDB ist im Wesentlichen eine NoSQL-Datenbank im Browser und kann sehr große Datenmengen speichern. Jeder Anwendungsfall, der das Speichern von mehr als 10 MB Daten erfordert, ist für IndexedDB geeignet.

Im Gegensatz zu den anderen Formen der Browserspeicherung ist IndexedDB nicht auf das Speichern von Zeichenfolgen beschränkt. IndexedDB kann Daten aller Standard-JavaScript-Typen speichern. Wenn Sie eine Webanwendung erstellen, die hauptsächlich offline funktioniert, können Sie IndexedDB verwenden, um alle Daten der Anwendung zu speichern.

Clientseitiger Speicher ist flexibel und leistungsstark

Der Begriff clientseitige Speicherung bezieht sich auf die Speicherung von Anwendungsdaten im Browser. Clientseitiger Speicher ist für das Funktionieren der meisten modernen Webanwendungen unerlässlich. Es gibt verschiedene Arten von clientseitigem Speicher: Cookies, Local/SessionStorage und IndexedDB.

Alle Arten von Browserspeichern haben unterschiedliche Grenzen hinsichtlich ihrer Kapazität und der Art der Daten, die sie speichern können. Cookies sind der eingeschränkteste Typ, local/sessionStorage ist der bequemste und IndexedDB ist der leistungsstärkste.