Explication détaillée des étapes d'utilisation des cookies js

Cette fois, je vais vous apporter une explication détaillée des étapes d'utilisation de js-cookie, et quelles sont les précautions d'utilisation de js-cookie. Ce qui suit est un cas pratique. , jetons un coup d'oeil.

Les cookies sont de petits fichiers texte placés côté client par les concepteurs de sites Web. Généralement, les langages backend sont couramment utilisés et peuvent répondre à certains besoins personnalisés des utilisateurs. Le plug-in js-cookie est un plug-in JS qui exploite les cookies. Le fichier source ne fait que 3,34 Ko, ce qui est très léger. js-cookie prend également en charge l'installation et la gestion de npm et Bower. Jetons un coup d'œil à l'utilisation spécifique de js-cookie.

Une API JavaScript simple et légère pour gérer les cookies

Fonctionne dans tous les navigateurs
Accepte n'importe quel caractère
Fortement testé
Aucune dépendance
Prise en charge discrète de JSON
Prend en charge AMD/CommonJS
Conforme à la norme RFC 6265
Wiki utile
Activer l'encodage/décodage personnalisé
~900 octets compressés !

Méthode de citation :

1. Présentez js-cookie.js

1. Buvez du cdn directement :

2. Après téléchargement local :

3.ModularisationPendant le développement : importer les cookies depuis 'js-cookie'

2. Couramment utilisé API et méthodes de js-cookie.js

a. Définir un cookie

Cookies.set('name', 'value', { expires: 7, path: '' });//Expire dans 7 jours

Cookies.set('name', { foo: 'bar' });//Définir un json

b, lire le cookie

Cookies.get('name');//obtenir le cookie

Cookies.get(); #Lire tous les cookies

c, supprimer le cookie

Cookies.remove('name'); #Ce doit être le même chemin lors de la suppression des cookies.

Ce qui suit est une introduction aux pays étrangers

Utilisation de base

Créer un cookie, valable sur l'ensemble du site :

Cookies.set('name', 'value');

Créez un cookie expirant dans 7 jours, valable sur l'ensemble du site :

Cookies.set('name', 'value', { expires: 7 });

Créez un cookie expirant, valable au chemin de la page actuelle :

Cookies.set('name', 'value', { expires: 7, path: '' });

Lire le cookie :

Cookies.get('name'); >Cookies. get('nothing'); // => undefined

Lire tous les cookies visibles :

Cookies.get(); // => { name: 'value' }

Supprimer le cookie :

Cookies.remove('name');

Supprimer un cookie valide au chemin de la page actuelle :

Cookies.set('name', 'value', { path: ' ' }) ;

Cookies.remove('name'); // échec !
Cookies.remove('name', { path: '' }); // supprimé !

IMPORTANT ! Lors de la suppression d'un cookie, vous devez transmettre exactement les mêmes attributs de chemin et de domaine que ceux utilisés pour définir le cookie, sauf si vous vous appuyez sur les attributs par défaut.

Remarque : la suppression d'un cookie inexistant n'est pas effective. ne déclenche aucune

exception ni ne renvoie aucune valeur.

Conflits d'espace de noms

S'il existe un risque de conflit avec l'espace de noms Cookies, le noConflict La méthode vous permettra de définir un nouvel espace de noms et de conserver celui d'origine. Ceci est particulièrement utile lors de l'exécution du script sur des sites tiers, par exemple dans le cadre d'un widget ou d'un SDK.

// Attribuez l'API js-cookie à une variable différente et restaurez le "window.Cookies" d'origine

var Cookies2 = Cookies.noConflict();
Cookies2.set(' name', 'value');

Remarque : La méthode .noConflict n'est pas nécessaire lors de l'utilisation d'AMD ou de CommonJS, elle n'est donc pas exposée dans ces environnements.

JSON

js-cookie fournit un stockage JSON discret pour les cookies.

Lors de la création d'un cookie, vous pouvez transmettre un tableau ou un littéral d'objet au lieu d'une chaîne dans la valeur. Si vous le faites, js-cookie stockera la représentation sous forme de chaîne de l'objet selon JSON.stringify :

Cookies.set('name', { foo: 'bar' });

Lors de la lecture d'un cookie avec l'API Cookies.get par défaut, vous recevez la représentation sous forme de chaîne stockée dans le cookie :

Cookies.get('name'); // => '{"foo":"bar"}'
Cookies.get(); // => { name: '{"foo":"bar"}' }

Lors de la lecture d'un cookie avec l'API Cookies.getJSON, vous recevez la représentation analysée de la chaîne stockée dans le cookie selon JSON.parse :

Cookies.getJSON('name'); // => { foo: 'bar' }
Cookies.getJSON(); // => { name: { foo: 'bar' } }

Remarque : Pour prendre en charge IE6-7 (et le mode de compatibilité IE 8), vous devez inclure le polyfill JSON-js : https://github.com/douglascrockford/JSON-js

相信

推荐阅读：

JS原始值与引用值有哪些储存方式

Vue如何将过滤器格式化

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!