Speicher für das Web

Hay muchas opciones diferentes para almacenar datos en el BrowserUn navegador (además: browser) es una herramienta informática que te permite ver documentos y datos y navegar por la red. Los navegadores pueden mostrar distintos tipos de recursos de información; principalmente documentos HTML, a pesar de todo, además son posibles otros tipos de archivos y contenido multimedia, como PDF, JPEG, MPEG, GIF o el lenguaje de meta marcado. A través el uso de complementos especiales y la configuración respectivo, los Plus. ¿Cuál es mejor para tus necesidades?

27. April 2020
Aktualisiert 7. Mai 2020

Las conexiones a Internet pueden ser defectuosas o inexistentes mientras viaja, por lo que el soporte sin conexión y el rendimiento confiable son características comunes en las aplicaciones web progresivas. Incluso en entornos inalámbricos perfectos, el uso prudente del almacenamiento en ZwischenspeicherUn caché es un tipo de memoria auxiliar de la que se puede recuperar a alta velocidad con una capacidad de almacenamiento relativamente pequeña. Se encuentra entre la unidad central de procesamiento (CPU) y la memoria principal. Ayuda a evitar el acceso al disco duro o los recálculos complejos almacenando temporalmente ciertos datos y haciéndolos disponibles rápidamente cuando sea necesario. El caché almacena una copia de la petición actual y Plus y otras técnicas de almacenamiento puede mejorar sustancialmente la experiencia del usuario. Hay varias formas de almacenar en caché los recursos de la aplicación estática (HTMLHTML (Hypertext Markup Language) se usa para estructurar el contenido de texto de un documento web. No sólo se marca el contenido, sino además la meta-información que describe este contenido. Las páginas HTML se almacenan normalmente en el directorio raíz del servidor. Cómo se creó En la era digital, a los usuarios les resulta difícil hallar su camino en las webs y hacer un seguimiento de las estructuras de las Plus, JavaScriptJavaScript es un lenguaje de programación que funciona en el lado del cliente y con el que las webs pueden ser más funcionales. Incorporación en código HTML El código JavaScript puede ser incrustado en las páginas HTML, para que adquieran funcionalidad. Existen varias opciones. Puede estar entre las etiquetas <SCRIPT> y </SCRIPT>, puede estar contenido en un archivo externo, puede ser un parámetro de las etiquetas HTML, y puede estar Plus, CSSConcepto de CSS¿Qué es el CSS?CSS es un lenguaje de programación que se usa para definir el estilo y el aspecto de un documento que se ha escrito mediante de un lenguaje de etiquetas, como HTML. Conocido además como hojas de estilo en cascada, es el que se emplea para dar colores, indicar tipos de letra o inclusive resaltar aspectos como el espacio entre items para dotar de estilo a Plus, imágenes, etc.) y los datos (datos de usuario, artículos de noticias, etc.). ¿Pero cuál es la mejor solución? ¿Cuánto puedes almacenar? ¿Cómo evitas que sea desalojado?

Was soll ich anziehen?

Hier ist eine allgemeine Empfehlung zum Speichern von Ressourcen:

IndexedDB y la APIConcepto de API¿Qué es una API?Una API, siglas de Application Programming Interface o Interfaz de Programación de Apps, es un recopilatorio de código que se puede emplear para que varias apps se comuniquen entre ellas. Es algo que realiza una tarea equivalente a la interfaz de usuario al momento de promover la interacción entre persona y programa, solo que aplicado única y exclusivamente dentro del entorno del software.Aún cuando suene Plus de almacenamiento en caché son compatibles con todos los BrowserConcepto de Navegadores¿Qué son los Navegadores?Los Navegadores son herramientas informáticas que utilizamos para, normalmente, navegar por Internet y visitar cualquier página web, al mismo tiempo de para hacer otras tareas como ver documentos, observar vídeos o reproducir contenido multimedia de cualquier tipo. Son un tipo de software sencillamente usual y bastante utilizado hoy en día.Insistimos en que es algo que se utiliza con mucha frecuencia, puesto que moverse por Internet Plus modernos. Ambos son asincrónicos y no bloquearán el hilo principal. Son accesibles desde el Fenster Objekt-, Web- und Servicemitarbeiter, sodass sie überall in Ihrem Code einfach verwendet werden können.

Was ist mit anderen Speichermechanismen?

Im Browser stehen mehrere andere Speichermechanismen zur Verfügung, die jedoch nur begrenzt von Nutzen sind und erhebliche Leistungsprobleme verursachen können.

Sitzungsspeicher ist wimpernspezifisch und auf das Leben der Wimpern zugeschnitten. Dies kann nützlich sein, um kleine Mengen sitzungsspezifischer Informationen zu speichern, z. B. einen IndexedDB-Schlüssel. Es sollte mit Vorsicht verwendet werden, da es synchron ist und den Haupt-Thread blockiert. Es ist auf ca. 5 MB begrenzt und kann nur Zeichenfolgen enthalten. Da es sich um eine Registerkarte handelt, können Web- oder Servicemitarbeiter nicht darauf zugreifen.

Lokaler Speicher sollte vermieden werden, da es synchron ist und den Haupt-Thread blockiert. Es ist auf ca. 5 MB begrenzt und kann nur Zeichenfolgen enthalten. Auf LocalStorage können Web- oder Servicemitarbeiter nicht zugreifen.

Kekse tienen sus usos, pero no deben usarse para almacenamiento. Las cookies se envían con cada solicitud HTTPEl HTTP (Hyper Text Transfer Protocol) es un protocolo que se usa para transmitir datos en redes. HTTP es un estándar técnico generalmente aceptado que establece cómo un cliente web se comunica con un servidor para que los datos solicitados por el cliente puedan ser cargados y mostrados. Información general Junto con el URL y el HTML, HTTP es uno de los conceptos más importantes de Internet (www). Fue desarrollado Plus, por lo que almacenar algo más que una pequeña cantidad de datos aumentará significativamente el tamaño de cada solicitud web. Son síncronos y los trabajadores web no pueden acceder a ellos. Al igual que LocalStorage y SessionStorage, las cookies se limitan solo a cadenas.

das Dateisystem-API und die FileWriter-API bieten Methoden zum Lesen und Schreiben von Dateien in ein Sandbox-Dateisystem. Es ist zwar asynchron, wird jedoch nicht empfohlen, da dies der Fall ist
Nur in Chromium-basierten Browsern verfügbar.

Die Dateisystemzugriffs-API wurde entwickelt, um Benutzern das Lesen und Bearbeiten von Dateien in ihrem lokalen Dateisystem zu erleichtern. Der Benutzer muss die Berechtigung erteilen, bevor eine Seite eine lokale Datei lesen oder schreiben kann. Die Berechtigungen werden zwischen den Sitzungen nicht beibehalten.

WebSQL sollte nein verwendet werden, und die vorhandene Verwendung muss nach IndexedDB migriert werden. Die Unterstützung hat wurde gelöscht de casi todos los principales navegadores. El W3CEl W3C (World Wide Web Consortium) es un comité que se dedica a poner en práctica tecnologías uniformes en el uso y desarrollo de Internet. El organismo fue fundado en el MIT en Cambridge, Massachusetts, EE.UU. en 1994. El objetivo del W3C es uniformar las especificaciones técnicas y determinar directrices para el desarrollo de tecnologías web, de forma que se mantenga la idea básica de la World Wide Web. Tecnologías Plus Die Pflege der Web SQL-Spezifikation wurde beendet im Jahr 2010, ohne zusätzliche Upgrade-Pläne geplant.

Der Anwendungscache muss nein Die vorhandene Verwendung muss auf die Servicemitarbeiter und die Cache-API migriert werden. Ist gewesen
obsolet und die Kompatibilität wird in Zukunft aus den Browsern entfernt.

Wie viel kann ich speichern?

Bald, vielmindestens ein paar hundert Megabyte und möglicherweise Hunderte von Gigabyte oder mehr. Browser-Implementierungen variieren, aber die Menge des verfügbaren Speichers hängt im Allgemeinen von der Menge des auf dem Gerät verfügbaren Speichers ab.

• Mit Chrome kann der Browser bis zu 80% des gesamten Speicherplatzes verwenden. Eine Quelle kann bis zu 60% des gesamten Speicherplatzes verwenden. Mit der StorageManager-API können Sie das maximal verfügbare Kontingent ermitteln. Andere Chromium-basierte Browser ermöglichen es dem Browser möglicherweise, mehr Speicherplatz zu verwenden. Weitere Informationen zur Chrome-Bereitstellung finden Sie in PR # 3896.
• Internet Explorer 10 und neuere Versionen können bis zu 250 MB speichern und benachrichtigen den Benutzer, wenn mehr als 10 MB verwendet wurden.
• Mit Firefox kann der Browser bis zu 50% freien Speicherplatz verwenden. EIN
  eTLD + 1
  Gruppe (zum Beispiel, example.com, www.example.com y foo.bar.example.com)
  kann bis zu 2 GB verwenden. Mithilfe der StorageManager-API können Sie ermitteln, wie viel Speicherplatz verfügbar ist.
• Safari (sowohl Desktop als auch Mobile) scheint bis zu 1 GB zuzulassen. Wenn das Limit erreicht ist, fordert Safari den Benutzer auf, das Limit in Schritten von 200 MB zu erhöhen. Ich konnte keine offizielle Dokumentation dazu finden.

In der Vergangenheit hat der Browser den Benutzer um Erlaubnis gebeten, weitere Daten zu verwenden, wenn eine Site einen bestimmten Schwellenwert für gespeicherte Daten überschreitet. Wenn die Quelle beispielsweise mehr als 50 MB verwendet hat, fordert der Browser den Benutzer auf, das Speichern von bis zu 100 MB zuzulassen, und fragt dann erneut in Schritten von 50 MB.

Heutzutage werden die meisten modernen Browser den Benutzer nicht warnen und es einer Site ermöglichen, bis zu ihrem zugewiesenen Kontingent zu verwenden. Die Ausnahme scheint Safari zu sein, das 750 MB anfordert und die Erlaubnis zum Speichern von bis zu 1,1 GB anfordert. Wenn eine Quelle versucht, mehr als das zugewiesene Kontingent zu verwenden, schlagen nachfolgende Versuche, Daten zu schreiben, fehl.

Wie kann ich den verfügbaren Speicherplatz überprüfen?

Im viele Browser, du kannst den ... benutzen
StorageManager-API um festzustellen, wie viel Speicher für die Quelle verfügbar ist und wie viel Speicher sie verwendet. Gibt die Gesamtzahl der von IndexedDB und der Cache-API verwendeten Bytes an und berechnet den ungefähren verbleibenden verfügbaren Speicherplatz.

wenn (Navigator.storage &AmpereConcepto de AMP¿Qué es el AMP o Accelerated Mobile Pages?El AMP, abreviatura de Accelerated Mobile Pages, es una propuesta que empezó a tomar forma en el año 2016 con la finalidad de mejorar la usabilidad, lectura y, en general, la experiencia de los usuarios de teléfono celular dentro de cualquier página web. Emprendida por Google con un aperturismo total (es de código abierto), lleva en activo desde entonces para facilitar Plus;& Navigator.storage.estimate) {
const quota = erwarten Navigator.storage.estimate();
const percentageUsed = (quota.Verwendung / quota.quota) * 100;
console.Log(`You've used ${percentageUsed}% of the available storage.`);
const remaining = quota.quota - quota.Verwendung;
console.Log(`You can write up to ${remaining} more bytes.`);
}

StorageManager ist nicht implementiert in allen Browsern noch, so dass Sie es erkennen müssen, bevor Sie es verwenden. Selbst wenn es verfügbar ist, sollte es Kontingentfehler abfangen (siehe unten). In einigen Fällen kann das verfügbare Kontingent die tatsächlich verfügbare Speichermenge überschreiten.

Inspizieren

Während der Entwicklung können Sie die DevTools Ihres Browsers verwenden, um die verschiedenen Speichertypen zu überprüfen und alle gespeicherten Daten einfach zu löschen.

Während ich an diesem Artikel arbeitete, schrieb ich eine einfaches Werkzeug um schnell zu versuchen, so viel Speicher wie möglich zu verwenden. Auf diese Weise können Sie schnell und einfach mit verschiedenen Speichermechanismen experimentieren und sehen, was passiert, wenn Sie Ihr gesamtes Kontingent verbrauchen.

Wie gehe ich mit dem Kontingentüberschuss um?

Was sollten Sie tun, wenn Sie das Kontingent überschreiten? Am wichtigsten ist, dass Sie immer Tippfehler erkennen und behandeln, sei es QuotaExceededError o algo mas. Luego, dependiendo del diseño de su aplicación, decida cómo manejarlo. Por ejemplo, elimine el InhaltEl contenido puede ser muy difícil de definir con precisión. Es una definición que se refiere a las declaraciones contenidas en un documento o publicación de cualquier tipo y puede incluir las tecnologías de la información y la comunicación. Esto cubre todos los tipos de medios como imágenes y texto. A parte de esto, en el campo de la optimización de motores de búsqueda, los términos duplicar contenido, contenido único, Plus al que no se ha accedido en mucho tiempo, elimine datos según el tamaño o proporcione una forma para que los usuarios elijan lo que desean eliminar.

Sowohl IndexedDB als auch Cache API geben a zurück DOMError namens
QuotaExceededError wenn Sie das verfügbare Kontingent überschritten haben.

IndexedDB

Wenn der Ursprung sein Kontingent überschritten hat, schlagen Versuche, in IndexedDB zu schreiben, fehl. Die Transaktion onabort () handler será llamado, pasando un VeranstaltungConcepto de Evento¿Qué es un Evento?Un Evento es una actividad de carácter social que suele tener cierta proyección a nivel público y, de esta manera, suscita el interés de un determinado sector relacionado con la temática o con la razón por el que se celebra. Es un tipo de acto que suele tener mucha repercusión a nivel empresarial.Podemos hallar distintos tipos de eventos, desde los deportivos hasta los empresariales, pasando Plus. El evento incluirá un DOME-Ausnahme in der Fehlereigenschaft. Überprüfen Sie den Fehler Süßkartoffel Um zu zurückkehren QuotaExceededError.

const transaction = idb.transaction(['entries'], 'readwrite');
transaction.onabort = Funktion(Veranstaltung) {
const Error = Veranstaltung.ZielConcepto de Target¿Qué es el Target?El Target es uno de los conceptos primordiales del marketing. Se usa para hablar del público al que se destinan las acciones y estrategias de cualquier campaña publicitaria o comercial. Es el objetivo al que ha de hablarle marca para suministrarle sus servicios o productos, aquellos a los que les interesa lo que brindan o pueda resultarle interesante por afinidad o por necesidades.Es uno de Plus.Error; 
wenn (Error.Süßkartoffel == 'QuotaExceededError') {
}
};

Cache-API

Wenn der Ursprung sein Kontingent überschritten hat, werden Versuche, in die Cache-API zu schreiben, mit a abgelehnt QuotaExceededError DOME-Ausnahme.

try {
const Zwischenspeicher = erwarten caches.open('my-cache');
erwarten Zwischenspeicher.hinzufügen(new Anfrage('/sample1.jpg'));
} catch (err) {
wenn (Error.Süßkartoffel === 'QuotaExceededError') {
}
}

Wie funktioniert die Räumung?

Der Webspeicher fällt in zwei Kategorien: "Bester Aufwand" und "Dauerhaft". Bester Aufwand bedeutet, dass der Browser den Speicher löschen kann, ohne den Benutzer zu unterbrechen, aber für langfristige oder kritische Daten weniger haltbar ist. Permanenter Speicher wird nicht automatisch gelöscht, wenn der Speicherplatz niedrig ist. Der Benutzer muss diesen Speicher manuell löschen (über die Browsereinstellungen).

Standardmäßig befinden sich die Daten einer Site (einschließlich IndexedDB, Cache-API usw.) in der Kategorie "Best Effort". Dies bedeutet, dass es sich nicht um eine Site handelt
persistenter Speicher angefordertkann der Browser nach eigenem Ermessen Daten von der Site entfernen, beispielsweise wenn der Gerätespeicher niedrig ist.

Die bestmögliche Räumungsrichtlinie lautet:

• Chromium-basierte Browser beginnen, Daten zu entfernen, wenn der Browser nicht mehr über genügend Speicherplatz verfügt. Dabei werden zuerst alle Daten von der zuletzt verwendeten Ursprungssite und dann von der nächsten gelöscht, bis der Browser das Limit nicht mehr überschreitet.
• Internet Explorer 10+ entfernt die Daten nicht, verhindert jedoch, dass die Quelle mehr schreibt.
• Firefox beginnt mit der Räumung von Daten, wenn der verfügbare Speicherplatz voll ist, und löscht alle Daten von der zuletzt verwendeten Quellwebsite und dann von der nächsten, bis der Browser das Limit nicht mehr überschreitet.
• Safari hat zuvor keine Daten entfernt, aber kürzlich ein neues Limit von sieben Tagen für den gesamten Schreibspeicher eingeführt (siehe unten).

A partir de iOS y iPadOS 13.4 y Safari 13.1 en macOS, existe un límite de siete días en todo el almacenamiento de escritura de SkripteConcepto de Scripts¿Qué son los Scripts?Los Scripts son fragmentos de código que se usan para dar forma a herramientas tanto en Internet como en el sector de la informática en general. Son una parte crucial del software, puesto que se trata exactamente del código que conforma a una aplicación en su totalidad o a una de sus funciones, como además el que puedes hallar explorando cómo está hecha una web.Desde Plus, incluido IndexedDB, el registro del trabajador del servicio y la API de caché. Esto significa que Safari desalojará todo el contenido de la caché después de siete días de uso de Safari si el usuario no interactúa con el sitio. Esta política de desalojo gilt nicht für installierte PWAs die dem Startbildschirm hinzugefügt wurden. Uhr
Vollständige Blockierung von Cookies von Drittanbietern und mehr beim BlogEl término blog se usa para describir un diario virtual en Internet. El autor de un blogger puede publicar posts sobre cualquier tema. Los posts suelen estar presente de forma cronológica. El estilo de redacción de un blog suele ser informal y se escribe en primera persona. No obstante, además son posibles otros estilos, por ejemplo en el caso de los periódicos online, en los que la atención se centra Plus de WebKit para obtener detalles completos.

Bonus: Warum einen Container für IndexedDB verwenden?

IndexedDB ist eine Low-Level-API, die vor der Verwendung eine umfangreiche Konfiguration erfordert, was beim Speichern einfacher Daten besonders schmerzhaft sein kann. Im Gegensatz zu den meisten modernen vielversprechenden APIs ist es ereignisbasiert. Versprechen Wrapper mögen
idb Für IndexedDB werden einige der leistungsstarken Funktionen ausgeblendet, vor allem aber die komplexe Maschinerie (z. B. Transaktionen, Schemaversionierung), die mit der IndexedDB-Bibliothek geliefert wird.

Fazit

Vorbei sind die Zeiten begrenzter Speicherung, in denen der Benutzer immer mehr Daten speichern muss. Websites können alle Ressourcen und Daten, die sie zum Funktionieren benötigen, effizient speichern. Verwendung der StorageManager-API Sie können bestimmen, wie viel Ihnen zur Verfügung steht und wie viel Sie verwendet haben. Und mit
DauerspeicherSofern der Benutzer es nicht entfernt, können Sie es vor Räumung schützen.

Zusätzliche Ressourcen

Vielen Dank

Ein besonderer Dank geht an Jarryd Goodman, Phil Walton, Eiji Kitamura, Daniel Murphy, Darwin Huang, Josh Bell, Marijn Kruisselbrink und Victor Costan für die Durchsicht dieses Artikels. Vielen Dank an Eiji Kitamura, Addy Osmani und Marc Cohen, die die Originalartikel geschrieben haben, auf denen sie basieren. Eiji hat ein nützliches Tool namens geschrieben Browser-Speicher-Missbraucher Dies war nützlich, um das aktuelle Verhalten zu überprüfen. Sie können so viele Daten wie möglich speichern und die Speicherbeschränkungen in Ihrem Browser anzeigen. Vielen Dank an Francois Beaufort, der Safari untersucht hat, um die Speichergrenzen herauszufinden.

Das Bild des Helden stammt von Guillaume Bolduc in
Unsplash.