Geschrieben von Nelson Michael✏️
Anmerkung des Herausgebers: Dieser Artikel wurde zuletzt am 7. August 2024 von Rahul Chhodde aktualisiert, um eine tiefergehende Untersuchung der Speicherung von Objekten in localStorage zu bieten, beispielsweise Techniken zur Serialisierung von JavaScript-Objekten mithilfe von JSON.stringify. und Situationen, in denen das Arbeiten mit und das Speichern mehrerer Objekte in localStorage erforderlich ist.
Die Web Storage API bietet JavaScript-basierte Mechanismen zum sicheren Speichern und Zugreifen auf Daten als Schlüssel-Wert-Paare im Browser des Clients. Dies ist nützlich, um nicht vertrauliche Daten wie Benutzereinstellungen, Anwendungsstatus und in manchen Fällen sogar API-Antworten zu speichern.
Die beiden Mechanismen der Web Storage API, localStorage und sessionStorage, ermöglichen es Entwicklern, Daten dauerhaft und temporär zu speichern. Diese gespeicherten Daten können später leicht abgerufen und zur Erleichterung des Benutzers verwendet werden.
In diesem Artikel erfahren Sie, wie Sie JavaScript-Objekte in Strings umwandeln und in JSON-Strings analysieren, um sie in localStorage zu speichern, und dann den Vorgang umkehren, um die Daten abzurufen. Außerdem gehen wir kurz auf die wichtigsten Unterschiede zwischen localStorage, sessionStorage und HTTP-Cookies ein und heben die Vor- und Nachteile der Verwendung von localStorage gegenüber den beiden anderen hervor.
Das localStorage Objekt ist einer der beiden Mechanismen von Web Storage, die es Entwicklern ermöglichen, Daten im Browser des Clients zu speichern, die auch nach dem Schließen des Browserfensters bestehen bleiben. Auf diese gespeicherten Daten kann in einer bestimmten Domäne mithilfe benutzerfreundlicher API-Methoden zugegriffen werden, von denen einige unten aufgeführt sind:
localStorage.setItem("myDataKey", "My data");
localStorage.getItem("myDataKey"); // "My data"
localStorage.removeItem("myDataKey");
Beachten Sie, dass auf die im localStorage-Objekt einer Domäne gespeicherten Daten nur von Seiten desselben Ursprungs zugegriffen oder diese geändert werden können, was in diesem Fall gemeinsam für Protokoll, Domäne und Port steht. Sie können dieses Verhalten mithilfe dieser Methoden in der Entwicklerkonsole Ihres Browsers überprüfen.
Laut W3Schools speichert das localStorage-Objekt die Daten ohne Ablaufdatum. Die Daten werden auch dann nicht gelöscht, wenn der Nutzer die Seite verlässt oder das Browserfenster schließt; Es wird für zukünftige Sitzungen verfügbar sein. Diese Fähigkeit, die Daten zu speichern, wird in der Software- und Webentwicklung als Datenpersistenz bezeichnet.
Der zweite Web Storage-Mechanismus, sessionStorage, ist nahezu identisch mit localStorage, unterscheidet sich jedoch in zweierlei Hinsicht: Er speichert vorübergehend Daten für die angegebene (oder aktuelle) Registerkarte und tut dies nur für einen begrenzten Zeitraum.
Das sessionStorage-Objekt bleibt aktiv, solange die entsprechende Registerkarte geöffnet ist, und speichert die Daten auch beim erneuten Laden und Wiederherstellen der Seite. Wenn eine Webseite in einen Browser-Tab geladen wird, erstellt sessionStorage, falls verwendet, eine neue Seitensitzung und weist sie diesem Tab zu. Diese Seitensitzung ist nur für diesen bestimmten Ursprung gültig, auf den in dieser bestimmten Registerkarte zugegriffen wird.
Hinweis: Die in jeder Art von Webspeicher gespeicherten Daten sind für jedes Protokoll einer bestimmten Seite unterschiedlich. Dies bedeutet, dass Daten, die auf einer Site gespeichert sind, auf die über HTTP zugegriffen wird, in einem anderen sessionStorage-Objekt gespeichert werden als Daten, die auf derselben Site gespeichert sind, auf die über HTTPS zugegriffen wird.
localStorage und sessionStorage funktionieren ähnlich, der Hauptunterschied besteht jedoch darin, dass die in localStorage gespeicherten Daten persistent sind, zwischen Registerkarten desselben Ursprungs gemeinsam genutzt werden und für diesen bestimmten Ursprung ewig bestehen bleiben, es sei denn, der Speicher des Browsers wird gelöscht oder wir löschen localStorage mithilfe von JavaScript oder manuell.
Mit Chrome DevTools können Sie die Daten sowohl in localStorage- als auch in sessionStorage-Objekten anzeigen und die soeben behandelten Unterschiede beobachten. Hier ist ein Screenshot, der das Auffinden beider Objekte auf der Registerkarte „Anwendung“ von DevTools zeigt: 
Um Informationen wie Benutzereinstellungen, Anwendungszustände, API-Antworten und größere Datenmengen zu speichern und wiederzuverwenden, um die wahrgenommene Leistung zu verbessern, wählen wir localStorage gegenüber sessionStorage, da diese Informationen bestehen bleiben sollten, um gelegentlich zur Personalisierung und Aktualisierung der Benutzererfahrung verwendet zu werden .
Hinweis: Wenn der letzte private Tab geschlossen wird, werden die im localStorage-Objekt einer in einem privaten Tab oder im Inkognito-Modus geöffneten Website gespeicherten Daten gelöscht, was sinnvoll ist, da es sich um eine private Browsersitzung handelt.
HTTP-Cookies sind ein herkömmlicher Mechanismus zum Speichern kleiner Datenbits, die während jeder HTTP-Anfrage zwischen dem Client und dem Server ausgetauscht werden.
Une fois connecté à un client, le serveur génère certaines informations, les enregistre dans un fichier cookie et les envoie au navigateur du client. Ces informations sont étiquetées avec un identifiant unique pour chaque utilisateur et son ordinateur, ce qui aide le serveur à identifier l'utilisateur chaque fois qu'une connexion est établie.
Les cookies contiennent des informations telles que des données d'authentification et de session, des jetons CSRF, des données de suivi et de minuscules préférences utilisateur spécifiques au site pour aider à personnaliser l'expérience utilisateur. Cependant, ils peuvent constituer un cauchemar en matière de confidentialité. Nous en discuterons dans le segment suivant.
Les cookies ne sont pas la solution recommandée pour stocker des volumes de données plus importants côté client. Ils sont mieux adaptés à la gestion de sessions et constituent l’une des solutions les plus largement prises en charge pour ce faire.
À chaque requête, les cookies sont envoyés au serveur dans les en-têtes HTTP du navigateur, par opposition à l'utilisation de localStorage ou sessionStorage, qui ne sont accessibles par l'application que comme stockage de données côté client et sont ouverts aux vulnérabilités.
Pour la sécurité de la session, les cookies marqués comme Secure et HttpOnly peuvent minimiser les risques de piratage de session, limitant les attaques XSS (cross-site scripting) et CSRF (cross-side request forgery) sur le navigateur de l'utilisateur pendant la session.
Les cookies HTTP sont une norme de longue date, et il n'est pas toujours possible de conserver vos applications 100 % sans cookies. Cependant, il existe quelques cas où vous souhaiterez peut-être les éviter :
Ces points nous obligent à stocker nos tas de données non sensibles dans localStorage. De telles situations nécessitent souvent de sauvegarder localement des données complexes telles que des objets JavaScript, ce qui nécessite une approche légèrement différente.
Les applications Web modernes nécessitent souvent d'enregistrer les objets JavaScript localement pour fournir un accès hors ligne, restaurer l'état de l'application ou mettre en cache une réponse API pour les avantages perçus en termes de performances.
Notez que ces données ne doivent pas contenir d'informations sensibles, car une fois stockées dans Web Storage, elles deviennent accessibles à tout code JavaScript exécuté sur la même origine.
Commençons par acquérir une compréhension de base de la façon de travailler avec localStorage en explorant ses méthodes et propriétés pour divers cas d'utilisation :
Vous pouvez en savoir plus sur ces méthodes dans la documentation de l'API Web Storage de MDN.
L'exemple ci-dessous démontre la persistance des données obtenue à l'aide de certaines de ces méthodes de l'API Web Storage. Cliquez sur le bouton Compte actuel, réexécutez le CodePen et voyez les données de comptage persistantes à l'aide de localStorage :
Voir le Pen localStorage en action par Rahul (@_rahul) sur CodePen.
Dans la démo ci-dessus, chaque fois que vous cliquez sur le nombre ou sur le bouton Effacer, plusieurs éléments localStorage sont créés, lus ou modifiés et les modifications apportées aux valeurs correspondantes sont reflétées dans l'interface.
Le stockage des données d'objets JavaScript dans Web Storage est un peu délicat, car il vous permet de stocker uniquement des valeurs de chaîne. Si nous essayons de stocker un objet JavaScript sans le convertir au préalable en chaîne, nous obtiendrons une réponse [object Object], comme le montre l'image ci-dessous :
[object Object] est une représentation sous forme de chaîne d'une instance d'objet dont la valeur n'a jamais été lue au moment du stockage des données, ce qui entraînera une perte de données.
The correct way to store object data to localStorage is to first convert it to a string. Then, we can move on to the storage procedure.
This object-to-string conversion of object data is known as serialization, and turning this converted string back to object data is called deserialization. Let’s briefly discuss two important JSON methods that are responsible for object data serialization and deserialization:
Now, utilizing the setItem method with JSON stringify, we can easily convert a JavaScript object to a JSON string and push it to the localStorage object. Here’s a quick example to demonstrate this:
const userObj = {
name: "John Doe",
age: 32,
gender: "Male",
profession: "Optician"
};
localStorage.setItem("userObj", JSON.stringify(myObject));
Now, if we try to retrieve the object data without deserializing it, we will receive a JSON string instead of an object, which makes sense, as it is what we stored to localStorage.
We need to deserialize this JSON string data using the JSON parse method to turn it back into a JavaScript object:
let newObject = localStorage.getItem("myObject");
console.log(JSON.parse(newObject));
Here, we retrieved our previously set JavaScript object using the getItem method on the localStorage object and saved it into a variable. Next, we parsed that string into a JavaScript object and finally logged it to the console:
Let’s say we have a bunch of similar objects, and we want to group all of them and store them as one JSON string in the localStorage. We can turn them into an object array and then serialize them as shown below:
const todos = [todo1, todo2, todo3];
localStorage.setItem("todos", JSON.stringify(todos));
If you have bigger chunks of data to work with, you might want to store each of them with separate keys, but accessing all of them quickly can be done using this namespace approach:
// Storing
localStorage.setItem('todos:1', JSON.stringify(todo1));
localStorage.setItem('todos:2', JSON.stringify(todo2));
// Retrieving
const keys = Object.keys(localStorage).filter(key => key.startsWith('todos:'));
const todos = keys.map(key => JSON.parse(localStorage.getItem(key)));
localStorage is one of the mechanisms of the Web Storage API. The API provides 5-10MB of storage per origin, and the exact storage may vary depending on the browser. Respecting this size limit, you should avoid storing more than 3-4MB of data per origin in Web Storage objects.
Keep in mind that Web Storage API operations are synchronous and block the main thread, therefore performing heavy operations using it may block other resources from loading in the browser.
Primitive data types like numbers, Booleans, and strings are JSON-safe, while values like functions, undefined, symbols, and Date objects are not JSON-safe. If no JSON-safe values are found during conversion, they are either excluded from an object or changed to null in an array.
Note: Some of these such values can be made JSON-safe, for example, we used the toISOstring method with the Date object in this example to make it JSON-safe before pushing it to Web Storage.
In this article, we learned a useful technique for storing multiple bits of information in a single localStorage key and using the JSON stringify and parse methods. We also covered some working demonstrations that apply this approach to different tasks, as well as storing and retrieving multiple JavaScript objects from localStorage.
In summary, we should be mindful of the data we store locally, and take advantage of the localStorage object to store JavaScript objects by first converting them to JSON strings with the JSON.stringify method and then turning them back to objects with the JSON.parse method.
Debugging code is always a tedious task. But the more you understand your errors, the easier it is to fix them.
LogRocket allows you to understand these errors in new and unique ways. Our frontend monitoring solution tracks user engagement with your JavaScript frontends to give you the ability to see exactly what the user did that led to an error.
LogRocket 记录控制台日志、页面加载时间、堆栈跟踪、带有标头正文的慢速网络请求/响应、浏览器元数据和自定义日志。了解 JavaScript 代码的影响从未如此简单！
免费试用。
以上是在 localStorage 中存储和检索 JavaScript 对象的详细内容。更多信息请关注PHP中文网其他相关文章！
