Heim > Web-Frontend > js-Tutorial > So verwenden Sie das leichtgewichtige JS-Cookie-Plug-in js-cookie

So verwenden Sie das leichtgewichtige JS-Cookie-Plug-in js-cookie

亚连
Freigeben: 2018-05-26 15:51:21
Original
1981 Leute haben es durchsucht

Das js-cookie-Plugin ist ein JS-Plugin, das Cookies betreibt. Die Quelldatei ist nur 3,34 KB groß und unterstützt auch die Installation und Verwaltung von npm und Bower Spezifische Verwendung von js-cookie

Cookies sind kleine Textdateien, die von Website-Designern auf der Clientseite platziert werden. Sie werden im Allgemeinen häufig in Backend-Sprachen verwendet und können einige der personalisierten Bedürfnisse des Benutzers erfüllen. Das js-cookie-Plugin ist ein JS-Plugin, das Cookies betreibt. Die Quelldatei ist nur 3,34 KB groß, was sehr leicht ist. js-cookie unterstützt auch die Installation und Verwaltung von npm und Bower. Werfen wir einen Blick auf die spezifische Verwendung von js-cookie.

Eine einfache, leichte JavaScript-API für den Umgang mit Cookies

Funktioniert in allen Browsern
Akzeptiert jedes Zeichen
Ausgiebig getestet
Keine Abhängigkeit
Unaufdringliche JSON-Unterstützung
Unterstützt AMD/CommonJS
RFC 6265-kompatibel
Nützliches Wiki
Benutzerdefinierte Kodierung/Dekodierung aktivieren
~900 Byte gezippt!

Referenzmethode:

1 , js-cookie.js vorstellen

1. Trinken Sie die CDN direkt:

<script src="https://cdn.jsdelivr.net/npm/js-cookie@2/src/js.cookie.min.js"></script>
Nach dem Login kopieren

2. Während der modularen Entwicklung:

<script src="/path/to/js.cookie.js"></script>
Nach dem Login kopieren

2. Häufig verwendete APIs und Methoden von js-cookie.js

a. Cookie setzen

import Cookies from &#39;js-cookie&#39;
Nach dem Login kopieren

b. Cookie lesen

Cookies.set(&#39;name&#39;, &#39;value&#39;, { expires: 7, path: &#39;&#39; });//7天过期
Cookies.set(&#39;name&#39;, { foo: &#39;bar&#39; });//设置一个json
Nach dem Login kopieren

c. Cookies löschen

Cookies.get(&#39;name&#39;);//获取cookie
Cookies.get(); #读取所有的cookie
Nach dem Login kopieren

Das Folgende ist eine Einführung in fremde Länder

Grundlegende Verwendung

Erstellen Sie ein Cookie, das überall gültig ist gesamte Website:

Cookies.remove(&#39;name&#39;); 
#删除cookie时必须是同一个路径。
Nach dem Login kopieren

Erstellen Sie ein Cookie, das in 7 Tagen abläuft und auf der gesamten Website gültig ist:

Cookies.set(&#39;name&#39;, &#39;value&#39;);
Nach dem Login kopieren

Erstellen Sie ein ablaufendes Cookie, das für den Pfad der aktuellen Seite gültig ist:

Cookies.set(&#39;name&#39;, &#39;value&#39;, { expires: 7 });
Nach dem Login kopieren

Cookie lesen:

Cookies.set(&#39;name&#39;, &#39;value&#39;, { expires: 7, path: &#39;&#39; });
Nach dem Login kopieren

Alle sichtbaren Cookies lesen:

Cookies.get(&#39;name&#39;); // => &#39;value&#39;
Cookies.get(&#39;nothing&#39;); // => undefined
Nach dem Login kopieren

Cookie löschen:

Cookies.get(); // => { name: &#39;value&#39; }
Nach dem Login kopieren

Ein Cookie löschen, das für den Pfad der aktuellen Seite gültig ist:

Cookies.remove(&#39;name&#39;);
Nach dem Login kopieren

WICHTIG! Beim Löschen eines Cookies müssen Sie genau die gleichen Pfad- und Domänenattribute übergeben, die zum Setzen des Cookies verwendet wurden, es sei denn, Sie verlassen sich auf die Standardattribute.

Hinweis: Das Entfernen eines Nicht vorhandenes Cookie löst keine Ausnahme aus und gibt keinen Wert zurück.

Namespace-Konflikte

Wenn die Gefahr eines Konflikts mit den Namespace-Cookies besteht, lässt die Methode noConflict dies zu Sie können einen neuen Namespace definieren und den ursprünglichen beibehalten. Dies ist besonders nützlich, wenn Sie das Skript auf Websites von Drittanbietern ausführen, z. B. als Teil eines Widgets oder SDK.

// Weisen Sie die js-cookie-API einem anderen zu Variable und stellen Sie die ursprünglichen „window.Cookies“ wieder her

Cookies.set('name', 'value', { path: '' });
Cookies.remove(&#39;name&#39;); // fail!
Cookies.remove('name', { path: '' }); // removed!
Nach dem Login kopieren

Hinweis: Die .noConflict-Methode ist bei Verwendung von AMD oder CommonJS nicht erforderlich und wird daher in diesen Umgebungen nicht verfügbar gemacht.

JSON

js-cookie bietet unauffällige JSON-Speicherung für Cookies.

Beim Erstellen eines Cookies können Sie ein Array oder ein Objektliteral anstelle einer Zeichenfolge im Wert übergeben , js-cookie speichert die Zeichenfolgendarstellung des Objekts gemäß JSON.stringify:

var Cookies2 = Cookies.noConflict();
Cookies2.set(&#39;name&#39;, &#39;value&#39;);
Nach dem Login kopieren

Wenn Sie ein Cookie mit der Standard-Cookies.get-API lesen, erhalten Sie die im Cookie gespeicherte Zeichenfolgendarstellung:

Cookies.set(&#39;name&#39;, { foo: &#39;bar&#39; });
Nach dem Login kopieren

Wenn Sie ein Cookie mit der Cookies.getJSON-API lesen, erhalten Sie die geparste Darstellung der im Cookie gespeicherten Zeichenfolge gemäß JSON.parse:

Cookies.get(&#39;name&#39;); // => &#39;{"foo":"bar"}&#39;
Cookies.get(); // => { name: &#39;{"foo":"bar"}&#39; }
Nach dem Login kopieren

Hinweis: Um IE6-7 (und den IE 8-Kompatibilitätsmodus) zu unterstützen, müssen Sie die JSON-js-Polyfüllung einbinden: https://github.com/douglascrockford/JSON- js

Das Obige habe ich für alle zusammengestellt. Ich hoffe, dass es in Zukunft für alle hilfreich sein wird.

Verwandte Artikel:

Das Prinzip von AJAX – wie man eine asynchrone und teilweise Aktualisierung erreicht


Ajax übergibt mehrere Parameter Implementierung Code


Ajax-Verifizierungs-Benutzername und Passwort-Beispielcode


Das obige ist der detaillierte Inhalt vonSo verwenden Sie das leichtgewichtige JS-Cookie-Plug-in js-cookie. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage