js-cookie plug-in is a JS plug-in that operates cookies. The source file is only 3.34 KB and 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

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 the cdn directly:

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

2. After downloading it locally:

<script src="/path/to/js.cookie.js"></script>

3. During modular development:

import Cookies from 'js-cookie'

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

a. Setting cookies

Cookies.set('name', 'value', { expires: 7, path: '' });//7天過期
Cookies.set('name', { foo: 'bar' });//設置一個json

b. Reading cookies

Cookies.get('name');//獲取cookie
Cookies.get(); #讀取所有的cookie

c、Delete cookie

Cookies.remove('name'); 
#刪除cookie時必須是同一個路徑。

The following is the 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' } }

Note: To support IE6-7 (and IE 8 compatibility mode) you need to include the JSON-js polyfill: https://github.com/douglascrockford/JSON-js

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

The principle of AJAX—how to achieve asynchronous and partial refresh

ajax passes multiple parameters Implementation code

Ajax verification user name and password example code

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