首頁 web前端 js教程 如何操作JS Cookie插件

如何操作JS Cookie插件

Jun 14, 2018 am 11:38 AM
用法

這次帶給大家如何操作JS Cookie插件,操作JS Cookie插件的注意事項有哪些,以下就是實戰案例,一起來看一下。

Cookie是網站設計者放置在客戶端的小文字文件,一般後台語言使用的比較多,可以實現使用者個人化的一些需求。 js-cookie插件是一個JS操作cookie的插件,原始檔只有3.34 KB,非常輕量級。 js-cookie也支援npm和Bower安裝和管理。以下來看看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!

#參考方法:

1 、引入js-cookie.js

1.直接飲用cdn:

2.本地下載下來後:

3.模組化開發時: import Cookies from 'js-cookie'

#2、js-cookie.js常用的API與方法

a、設定cookie

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

//7天過期

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

//設定一個jsonb、讀取cookie

Cookies.get('name');

//取得cookie

Cookies.get();

#讀取所有的cookiec、刪除cookie

Cookies.remove('name');

#刪除cookie時必須是同一個路徑。

以下是國外的介紹

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 notento do​​yet 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 origariable and restore the orig。 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' } }
登入後複製

相信看了本文案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章!

推薦閱讀:

node做出個性命令列工具

#JS程式碼做出txt檔案上傳預覽

以上是如何操作JS Cookie插件的詳細內容。更多資訊請關注PHP中文網其他相關文章!

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

AI Hentai Generator

AI Hentai Generator

免費產生 AI 無盡。

熱門文章

R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳圖形設置
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.如果您聽不到任何人,如何修復音頻
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
WWE 2K25:如何解鎖Myrise中的所有內容
4 週前 By 尊渡假赌尊渡假赌尊渡假赌

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

解析JSP註解的使用方法和分類 解析JSP註解的使用方法和分類 Feb 01, 2024 am 08:01 AM

JSP註解的分類及用法解析JSP註解分為兩種:單行註解:以結尾,只能註解單行程式碼。多行註解:以/*開頭,以*/結尾,可以註解多行程式碼。單行註解範例多行註解範例/**這是一段多行註解*可以註解多行程式碼*/JSP註解的用法JSP註解可以用來註解JSP程式碼,使其更易於閱

WPSdatedif函數的用法 WPSdatedif函數的用法 Feb 20, 2024 pm 10:27 PM

WPS是一款常用的辦公室軟體套件,其中的WPS表格功能被廣泛用於資料處理和計算。在WPS表格中,有一個非常有用的函數,即DATEDIF函數,它用於計算兩個日期之間的時間差。 DATEDIF函數是英文單字DateDifference的縮寫,它的語法如下:DATEDIF(start_date,end_date,unit)其中,start_date表示起始日期

如何正確使用C語言的exit函數 如何正確使用C語言的exit函數 Feb 18, 2024 pm 03:40 PM

c語言exit函數怎麼用,需要具體程式碼範例在C語言中,我們常常需要在程式中提前終止程式的執行,或是在某個特定的條件下退出程式。 C語言提供了exit()函數來實作這個功能。本文將介紹exit()函數的用法,並提供對應的程式碼範例。 exit()函數是C語言中的標準函式庫函數,它包含在頭檔中。它的作用是終止程式的執行,並且可以帶一個整數

Python函數介紹:abs函數的用法和範例 Python函數介紹:abs函數的用法和範例 Nov 03, 2023 pm 12:05 PM

Python函數介紹:abs函數的用法和範例一、abs函數的用法介紹在Python中,abs函數是一個內建函數,用於計算給定數值的絕對值。它可以接受一個數字參數,並傳回該數字的絕對值。 abs函數的基本語法如下:abs(x)其中,x是要計算絕對值的數值參數,可以是整數或浮點數。二、abs函數的範例下面我們將透過一些具體的範例來展示abs函數的用法:範例1:計算

Python函數介紹:isinstance函數的用法和範例 Python函數介紹:isinstance函數的用法和範例 Nov 04, 2023 pm 03:15 PM

Python函數介紹:isinstance函數的用法和範例Python是一門功能強大的程式語言,提供了許多內建函數,使得程式設計變得更加方便和有效率。其中一個非常有用的內建函數是isinstance()函數。本文將介紹isinstance函數的用法和範例,並提供具體的程式碼範例。 isinstance()函數用來判斷一個物件是否是指定的類別或類型的實例。該函數的語法如下

MySQL ISNULL 函數詳解及用法介紹 MySQL ISNULL 函數詳解及用法介紹 Mar 01, 2024 pm 05:24 PM

MySQL中的ISNULL()函數是用來判斷指定表達式或列是否為NULL的函數。它傳回一個布林值,如果表達式為NULL則回傳1,否則回傳0。 ISNULL()函數可以在SELECT語句中使用,也可以在WHERE子句中進行條件判斷。 1.ISNULL()函數的基本語法:ISNULL(expression)其中,expression是要判斷是否為NULL的表達式或

使用蘋果快速指令的方法 使用蘋果快速指令的方法 Feb 18, 2024 pm 05:22 PM

蘋果快捷指令怎麼用隨著科技的不斷發展,手機成為了人們生活中不可或缺的一部分。而在眾多手機品牌中,蘋果手機憑藉其穩定的系統和強大的功能一直備受用戶的喜愛。其中,蘋果快捷指令這項功能更是讓用戶的手機使用體驗更加便利和有效率。蘋果快捷指令是蘋果公司為其iOS12及更高版本推出的一項功能,透過建立和執行自訂指令,幫助用戶簡化手機操作流程,以達到更有效率的工作和

解析SQL中使用distinct關鍵字 解析SQL中使用distinct關鍵字 Feb 18, 2024 pm 09:21 PM

SQL中distinct用法詳解在SQL資料庫中,我們常常會遇到需要移除重複資料的情況。此時,我們可以使用distinct關鍵字,它能夠幫助我們去除重複數據,使得查詢結果更加清晰和準確。 distinct的基本使用方法非常簡單,只需要在select語句中使用distinct關鍵字即可。例如,以下是一個普通的select語句:SELECTcolumn_name

See all articles