首頁 web前端 js教程 輕量級JS Cookie插件js-cookie的使用方法

輕量級JS Cookie插件js-cookie的使用方法

May 26, 2018 pm 03:51 PM
cookie javascript

js-cookie插件是一個JS操作cookie的插件,原始檔案只有3.34 KB,非常輕量級,js-cookie也支援npm和Bower安裝和管理,下面看看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:

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

2.本地下載下來後:

<script src="/path/to/js.cookie.js"></script>
登入後複製

3.模組化開發時:

import Cookies from &#39;js-cookie&#39;
登入後複製

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

#a、設定cookie

Cookies.set(&#39;name&#39;, &#39;value&#39;, { expires: 7, path: &#39;&#39; });//7天过期
Cookies.set(&#39;name&#39;, { foo: &#39;bar&#39; });//设置一个json
登入後複製

b、讀取cookie

#
Cookies.get(&#39;name&#39;);//获取cookie
Cookies.get(); #读取所有的cookie
登入後複製

c、刪除cookie

Cookies.remove(&#39;name&#39;); 
#删除cookie时必须是同一个路径。
登入後複製

以下是國外的介紹

Basic Usage

Create a cookie, valid across the entire site:

Cookies.set(&#39;name&#39;, &#39;value&#39;);
登入後複製

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

Cookies.set(&#39;name&#39;, &#39;value&#39;, { expires: 7 });
登入後複製

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

Cookies.set(&#39;name&#39;, &#39;value&#39;, { expires: 7, path: &#39;&#39; });
登入後複製

Cookies.get(&#39;name&#39;); // => &#39;value&#39;
Cookies.get(&#39;nothing&#39;); // => undefined
登入後複製

#Read cookie:

Cookies.get(); // => { name: &#39;value&#39; }
登入後複製

Read all visible cookies:

Cookies.remove(&#39;name&#39;);
登入後複製

Delete cookie:

Cookies.set('name', 'value', { path: '' });
Cookies.remove(&#39;name&#39;); // fail!
Cookies.remove('name', { path: '' }); // removed!
登入後複製

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

var Cookies2 = Cookies.noConflict();
Cookies2.set(&#39;name&#39;, &#39;value&#39;);
登入後複製

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 default attributes.

Note: Removing a nonexistent doas 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 differable v the original "window.Cookies"

Cookies.set(&#39;name&#39;, { foo: &#39;bar&#39; });
登入後複製

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

#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.get(&#39;name&#39;); // => &#39;{"foo":"bar"}&#39;
Cookies.get(); // => { name: &#39;{"foo":"bar"}&#39; }
登入後複製

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

Cookies.getJSON(&#39;name&#39;); // => { foo: &#39;bar&#39; }
Cookies.getJSON(); // => { name: { foo: &#39;bar&#39; } }
登入後複製

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:

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

上面是我整理給大家的,希望今後對大家有幫助。 相關文章:

AJAX的原理—如何做到異步和局部刷新

##ajax傳遞多個參數的實作代碼

###ajax驗證使用者名稱和密碼的實例代碼#####################

以上是輕量級JS Cookie插件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脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱工具

記事本++7.3.1

記事本++7.3.1

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

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

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

熱門話題

Java教學
1657
14
CakePHP 教程
1415
52
Laravel 教程
1309
25
PHP教程
1257
29
C# 教程
1230
24
如何使用WebSocket和JavaScript實現線上語音辨識系統 如何使用WebSocket和JavaScript實現線上語音辨識系統 Dec 17, 2023 pm 02:54 PM

如何使用WebSocket和JavaScript實現線上語音辨識系統引言:隨著科技的不斷發展,語音辨識技術已成為了人工智慧領域的重要組成部分。而基於WebSocket和JavaScript實現的線上語音辨識系統,具備了低延遲、即時性和跨平台的特點,成為了廣泛應用的解決方案。本文將介紹如何使用WebSocket和JavaScript來實現線上語音辨識系

WebSocket與JavaScript:實現即時監控系統的關鍵技術 WebSocket與JavaScript:實現即時監控系統的關鍵技術 Dec 17, 2023 pm 05:30 PM

WebSocket與JavaScript:實現即時監控系統的關鍵技術引言:隨著互聯網技術的快速發展,即時監控系統在各個領域中得到了廣泛的應用。而實現即時監控的關鍵技術之一就是WebSocket與JavaScript的結合使用。本文將介紹WebSocket與JavaScript在即時監控系統中的應用,並給出程式碼範例,詳細解釋其實作原理。一、WebSocket技

cookie存在哪裡 cookie存在哪裡 Dec 20, 2023 pm 03:07 PM

Cookie通常儲存在瀏覽器的Cookie資料夾中的,瀏覽器中的Cookie檔案通常以二進位或SQLite格式存儲,如果直接開啟Cookie文件,可能會看到一些亂碼或無法讀取的內容,因此最好使用瀏覽器提供的Cookie管理介面來檢視和管理Cookie。

電腦上的cookie在哪裡 電腦上的cookie在哪裡 Dec 22, 2023 pm 03:46 PM

電腦上的Cookie儲存在瀏覽器的特定位置,具體位置取決於使用的​​瀏覽器和作業系統:1、Google Chrome, 儲存在C:\Users\YourUsername\AppData\Local\Google\Chrome\User Data\Default \Cookies中等等。

手機cookie在哪裡 手機cookie在哪裡 Dec 22, 2023 pm 03:40 PM

手機上的Cookie儲存在行動裝置的瀏覽器應用程式中:1、在iOS裝置上,Cookie儲存在Safari瀏覽器的Settings -> Safari -> Advanced -> Website Data中;2、在Android裝置上,Cookie儲存在Chrome瀏覽器的Settings -> Site settings -> Cookies中等等。

JavaScript與WebSocket:打造高效率的即時天氣預報系統 JavaScript與WebSocket:打造高效率的即時天氣預報系統 Dec 17, 2023 pm 05:13 PM

JavaScript和WebSocket:打造高效的即時天氣預報系統引言:如今,天氣預報的準確性對於日常生活以及決策制定具有重要意義。隨著技術的發展,我們可以透過即時獲取天氣數據來提供更準確可靠的天氣預報。在本文中,我們將學習如何使用JavaScript和WebSocket技術,來建立一個高效的即時天氣預報系統。本文將透過具體的程式碼範例來展示實現的過程。 We

簡易JavaScript教學:取得HTTP狀態碼的方法 簡易JavaScript教學:取得HTTP狀態碼的方法 Jan 05, 2024 pm 06:08 PM

JavaScript教學:如何取得HTTP狀態碼,需要具體程式碼範例前言:在Web開發中,經常會涉及到與伺服器進行資料互動的場景。在與伺服器進行通訊時,我們經常需要取得傳回的HTTP狀態碼來判斷操作是否成功,並根據不同的狀態碼來進行對應的處理。本篇文章將教你如何使用JavaScript來取得HTTP狀態碼,並提供一些實用的程式碼範例。使用XMLHttpRequest

瀏覽器cookie的儲存位置詳解 瀏覽器cookie的儲存位置詳解 Jan 19, 2024 am 09:15 AM

隨著網路的普及,我們使用瀏覽器進行上網已經成為一種生活方式。在日常使用瀏覽器過程中,我們常會遇到需要輸入帳號密碼的情況,如網購、社交、郵件等。這些資訊需要瀏覽器記錄下來,以便下次造訪時不需要再次輸入,這時候Cookie就派上了用場。什麼是Cookie? Cookie是指由伺服器端發送到使用者瀏覽器上並儲存在本地的一種小型資料文件,它包含了一些網站的使用者行為

See all articles