How to operate the JS Cookie plug-in

This time I will show you how to operate the JS Cookie plug-in, and what are the precautions for operating the JS Cookie plug-in. The following is a practical case, let's take a look.

Cookie is a small text file placed on the client by the website designer. Generally, the backend language is used more often and can realize some personalized needs of the user. The js-cookie plug-in is a JS plug-in that operates cookies. The source file is only 3.34 KB, which is very lightweight. js-cookie also supports npm and Bower installation and management. Let’s take a look at the specific usage of js-cookie.

A simple, lightweight JavaScript API for handling cookies

Works in all browsers
Accepts any character
Heavily tested
No dependency
Unobtrusive JSON support
Supports AMD/CommonJS
RFC 6265 compliant
Useful Wiki
Enable custom encoding/decoding
~900 bytes gzipped!

Quotation method:

1 , introduce js-cookie.js

1. Drink cdn directly:

2. After downloading locally:

3. During modular development: import Cookies from 'js-cookie'

2. Commonly used APIs and methods of js-cookie.js

a. Set cookies

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

Cookies.set('name', { foo: 'bar' });//Set a json

b, read cookie

Cookies.get('name');//Get cookies

Cookies.get(); #Read all cookies

c, delete cookies

Cookies.remove('name'); #It must be the same path when deleting cookies.

The following is a foreign introduction

Basic Usage

Create a cookie, valid across the entire site:

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

Create a cookie that expires 7 days from now, valid across the entire site:

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

Create an expiring cookie, valid to the path of the current page:

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

Read cookie:

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

Read all visible cookies:

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

Delete cookie:

Cookies.remove('name');

Delete a cookie valid to the path of the current page:

Cookies.set('name', 'value', { path: '' });
Cookies.remove('name'); // fail!
Cookies.remove('name', { path: '' }); // removed!

IMPORTANT! When deleting a cookie, you must pass the exact same path and domain attributes that were used to set the cookie, unless you're relying on the default attributes.

Note: Removing a nonexistent cookie does not raise any exception nor return any value.

Namespace conflicts

If there is any danger of a conflict with the namespace Cookies, the noConflict method will allow you to define a new namespace and preserve the original one. This is especially useful when running the script on third party sites e.g. as part of a widget or SDK.

// Assign the js-cookie api to a different variable and restore the original "window. Cookies"

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

Note: The .noConflict method is not necessary when using AMD or CommonJS, thus it is not exposed in those environments.

JSON

js-cookie provides unobtrusive JSON storage for cookies.

When creating a cookie you can pass an Array or Object Literal instead of a string in the value. If you do so, js-cookie will store the string representation of the object according to JSON.stringify:

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

When reading a cookie with the default Cookies.get api, you receive the string representation stored in the cookie:

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

When reading a cookie with the Cookies.getJSON api, you receive the parsed representation of the string stored in the cookie according to JSON.parse:

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

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the PHP Chinese website!

Recommended reading:

node makes a personalized command line tool

JS code makes a txt file upload preview

The above is the detailed content of How to operate the JS Cookie plug-in. For more information, please follow other related articles on the PHP Chinese website!