Json-String + Cookie + lokaler Speicher in JS

Json-String + Cookie + lokaler Speicher in JS

1.JSON-Zeichenfolge

JSON wird hauptsächlich für die Front-End- und Back-End-Interaktion verwendet. Es ist ein Datenformat, das bequemer zu verwenden ist als XML.

1.1Json-Syntax

Kann zur Darstellung von Objekten, Arrays, einfachen Datentypen usw. verwendet werden .

  • {} stellt ein Objekt dar, [] stellt ein Array dar
  • Schlüssel und Wert werden durch " getrennt, und Schlüssel und Schlüssel werden durch " getrennt. Der Attributname muss das " verwenden.
  • Versuchen Sie, NaN nicht als Wert zu verwenden. Wenn am Ende des Attributs kein anderes Attribut steht, behalten Sie es nicht.

Konvertierung zwischen Json und Objekten:

JSON-String zum Objekt `JSON.parse(JSON-String) gibt das konvertierte JS-Objekt zurück`
     Objekt in JSON-Zeichenfolge „JSON.stringify() wird verwendet, um einen Wert in eine JSON-Zeichenfolge umzuwandeln“


1.2 Beispiele

//Konvertieren Sie „String“-Daten im Objektformat in ein JSON-Objekt let s = `{"name":"onion","age":18}`;
 console.log(s) // Zeichenfolge => {"Name":"Onion","Alter":18}
 console.log(JSON.parse(s)); // //Objekt: Objekt
//Konvertieren Sie „String“-Daten im Array-Format in ein JSON-Objekt let s = `[1,5,8,9]`;
 console.log(s); // Zeichenfolge => [1,5,8,9]
 console.log(JSON.parse(s)); //Objekt: Objekt
 -----------------------------------------------------------------------------------
 //Objekt in JSON-Zeichenfolge konvertieren let s = {"name":"onion","age":18};
 console.log(JSON.stringify(s)); // Zeichenfolge => {"Name":"Zwiebel","Alter":18}
 // Array in JSON-String let s = [1,5,8,9];
   console.log(JSON.stringify(s)); // Zeichenfolge => [1,5,8,9]

Beachten:

  • Während der Konvertierung werden die Funktionen des Objekts herausgefiltert und spiegeln sich nicht in den von uns gedruckten Ergebnissen wider.
  • Beim tiefen Kopieren können Sie das Objekt zuerst in eine Zeichenfolge und dann wieder in ein Objekt umwandeln.
  • JSON kann keine Datenobjekte speichern. Lassen Sie nicht zu, dass zwei Eigenschaften mit demselben Namen im selben Objekt vorkommen.
  • Standardmäßig enthält die von JSON.stringify() ausgegebene Zeichenfolge keine Leerzeichen und Einrückungszeichen.

2. Verwendung von Cookies

Cookie zeichnen Benutzerinformationen im Browser auf. Wenn eine Seite in einer Serverumgebung geöffnet wird, können wir über die Einstellungen Informationen zum Benutzerbetrieb abrufen. Beispiele: Merken von Benutzerkennwörtern beim Anmelden, Informationen im Warenkorb eines persönlichen Taobao-Kontos usw. Die Gültigkeitsdauer eines Cookies kann sitzungsbezogen, langfristig oder festgelegt sein.

2.1 Wie wird es verwendet?

  • Wir können doucument.cookie erstellen, löschen, ändern und lesen.

Schauen Sie sich das Beispiel an:

Dokument.cookie = "Name=Zwiebel";
document.cookie = "Alter=18";

Die Ergebnisse sind wie folgt:

Die Zwiebeln waren uns zu scharf und ich dachte, ich probiere es stattdessen mal mit Kartoffeln:

**document.cookie = "Name=Zwiebel";
document.cookie = "name=Cookie";
document.cookie = "Alter=18";


Die Ergebnisse sind wie folgt:

Nachdem ich eine Zeit lang Kartoffeln gegessen habe, stelle ich fest, dass Kartoffeln nicht gut sind und ich keine Lust mehr darauf habe. Was soll ich tun? Wie löschen wir es also? Tatsächlich haben aufmerksame Freunde entdeckt, dass es eine Sitzungsebene gibt, auf der wir mithilfe des Schlüsselworts expires eine Gültigkeitsdauer festlegen können. Dieses Datum ist das Ablaufdatum.

 document.cookie = "name=Ablaufdatum;expires="+new Date('2021/11/25 03:58:20');


3. Lokale Speicherung

H5 fügt loclstorage und sessionStorage für die lokale Speicherung hinzu. Die Gültigkeitsdauer localstorage ist permanent, und die Gültigkeitsdauer von sessionStorage liegt auf Sitzungsebene. Hier konzentrieren wir uns auf loclstorage .

3.1 Grundlegende Verwendung

Verwenden Sie window.localstorage, um Localstorage zu betreiben (Fenster kann weggelassen werden)

//SetItem hinzufügen
localStorage.setItem("Name","Zwiebel");
//Artikel abrufen
localStorage.getItem("Name","Zwiebel");
//deleteremoveItem("Schlüssel-Wert-Paar")
localStorage.removeItem("Name");
// Klar
localStorage.clear();


3.2 Beispiel (Benutzername und Passwort merken)

Voraussetzung: Nachdem der Benutzer Benutzername und Passwort eingegeben hat, aktivieren Sie das Kontrollkästchen, um Benutzername und Passwort zu speichern, damit er sie bei der nächsten Anmeldung nicht erneut eingeben muss.

Benutzername: <input type="text" id="username">
  <br>
  Passwort: <input type="password" id="pwd">
  <br>
  <span style="font-size: 14px;">Benutzernamen und Passwort merken:</span> 
  <input type="checkbox" id="merken">

    // Kontrollkästchen const remember = document.getElementById('remember');
    //Benutzername const username = document.getElementById('username');
    //Passwort const pwd = document.getElementById('pwd');
      
    merken.onclick = function(){
      wenn (erinnern.überprüft) {
        //Benutzernamen und Passwort auswählen und im lokalen Speicher speichern.
        localStorage.setItem("Benutzername",Benutzername.Wert);
        localStorage.setItem("pwd",pwd.Wert);
      } anders {
        // Von „Ausgewählt“ auf „Nicht ausgewählt“ ändern, Benutzernamen und Passwort aus dem lokalen Speicher löschen localStorage.removeItem("Benutzername");
        localStorage.removeItem("pwd");
      }
      konsole.log();
    }
    //Bei jedem erneuten Öffnen der Seite prüfen, ob ein Wert im lokalen Speicher vorhanden ist, if (localStorage.getItem("username")) {
      //Wenn ein Wert vorhanden ist, schreiben Sie den Wert in das Eingabefeld.
      Benutzername.Wert = localStorage.getItem("Benutzername")
      pwd.value = localStorage.getItem("pwd");
      //Das Kontrollkästchen ist standardmäßig aktiviert. Remember.checked = true;
    }

Wirkung: Sobald wir das Passwort und den Benutzernamen eingegeben und das Kontrollkästchen aktiviert haben, müssen wir es beim nächsten Mal nicht erneut eingeben, da die Daten hier gespeichert sind ↓

Dies ist das Ende dieses Artikels über Json-String + Cookie + Localstorage in JS. Weitere relevante Inhalte zu Json-String + Cookie + Localstorage finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!

Das könnte Sie auch interessieren:
  • Verwendung von Local Storage und Session Storage in JavaScript
  • So verwenden Sie SessionStorage und LocalStorage in Javascript
  • So verwenden Sie localStorage in JavaScript
  • Lokaler JavaScript-Speicher: Verwendung von localStorage, sessionStorage und Cookies
  • So bedienen Sie LocalStorage in js

<<:  MP3- oder Flashplayer-Code auf der Webseite abspielen

>>:  Detaillierte Erklärung zur Verwendung von css-vars-ponyfill in der IE-Umgebung (nextjs-Build)

Artikel empfehlen

JS tiefe und flache Kopierdetails

Inhaltsverzeichnis 1. Was bedeutet „Shallow Copy“...

HTML- und CSS-Grundlagen (unbedingt lesen)

(1) HTML: HyperText Markup Language, die im Wesen...

Pessimistisches Sperren und optimistisches Sperren in MySQL

In relationalen Datenbanken sind pessimistisches ...

CSS+HTML zur Realisierung der Funktion der oberen Navigationsleiste

Implementierungseffektdiagramm für die Navigation...

So konfigurieren Sie den Redis-Sentinel-Modus in Docker (auf mehreren Servern)

Inhaltsverzeichnis Vorwort Zustand Docker install...

Erweiterte Docker-Methode zur schnellen Erweiterung

1. Befehlsmethode Führen Sie den Nginx-Dienst im ...

ElementUI implementiert kaskadierenden Selektor

In diesem Artikelbeispiel wird der spezifische Co...

Zusammenfassung der 10 am häufigsten gestellten Fragen in Linux-Interviews

Vorwort Wenn Sie sich auf die Stelle eines Betrie...

CSS-Lösung für mehrspaltiges Layout

1. Feste Breite + adaptiv Erwarteter Effekt: fest...

So legen Sie den Produktionsumgebungsmodus process.env.NODE_ENV fest

Bevor ich anfange, möchte ich betonen, dass proce...

Ein Beispiel für das elegante Schreiben von Urteilen in JavaScript

Inhaltsverzeichnis Vorwort 1. Monadisches Urteil ...

Codebeispiele für allgemeine Docker-Datenvolumenvorgänge

Wenn der Entwickler Dockerfile zum Erstellen des ...

Eine kurze Einführung in MySQL-Datenbankoptimierungstechniken

Eine ausgereifte Datenbankarchitektur ist nicht v...

Vue realisiert die Funktion zum Hochladen von Fotos auf den PC

In diesem Artikelbeispiel wird der spezifische Co...