ホームページ ウェブフロントエンド jsチュートリアル 軽量な JS Cookie プラグイン js-cookie の使用方法

軽量な JS Cookie プラグイン js-cookie の使用方法

May 26, 2018 pm 03:51 PM
cookie javascript

js-cookie プラグインは、Cookie を操作する JS プラグインです。ソース ファイルはわずか 3.34 KB で、js-cookie は npm と Bower のインストールと管理にも対応しています。 js-cookie

Cookie は、クライアント側のデザイナーによって配置された Web サイトの小さなテキスト ファイルであり、通常はバックエンド言語で使用され、ユーザーのパーソナライズされたニーズの一部を満たすことができます。 js-cookieプラグインはCookieを操作するJSプラグインで、ソースファイルはわずか3.34KBと非常に軽量です。 js-cookie は、npm と Bower のインストールと管理もサポートします。 js-cookieの具体的な使い方を見てみましょう。

Cookieを処理するためのシンプルで軽量なJavaScript API

すべてのブラウザで動作
任意の文字を受け入れます
厳しくテストされています
依存関係なし
目立たないJSONサポート
AMD/CommonJSをサポート
RFC 6265に準拠
便利なWiki
カスタムエンコード/デコードを有効化
~900 バイト gzipped!

引用方法:

1. js-cookie.js を導入します:

<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

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时必须是同一个路径。
ログイン後にコピー

のよく使うAPIとメソッド以下は海外の紹介です。

基本的な使用法 サイト全体で有効な Cookie を作成します:

Cookies.set(&#39;name&#39;, &#39;value&#39;);
ログイン後にコピー

今から 7 日後に有効期限が切れる、サイト全体で有効な Cookie を作成します:

Cookies.set(&#39;name&#39;, &#39;value&#39;, { expires: 7 });
ログイン後にコピー

有効期限切れの Cookie を作成します。現在のページ:

Cookies.set(&#39;name&#39;, &#39;value&#39;, { expires: 7, path: &#39;&#39; });
ログイン後にコピー

Cookie を読み取る:

Cookies.get(&#39;name&#39;); // => &#39;value&#39;
Cookies.get(&#39;nothing&#39;); // => undefined
ログイン後にコピー

表示されているすべての Cookie を読み取る:

Cookies.get(); // => { name: &#39;value&#39; }
ログイン後にコピー

Cookie を削除する:

Cookies.remove(&#39;name&#39;);
ログイン後にコピー

現在のページのパスに有効な Cookie を削除する:

Cookies.set('name', 'value', { path: '' });
Cookies.remove(&#39;name&#39;); // fail!
Cookies.remove('name', { path: '' }); // removed!
ログイン後にコピー

重要 Cookie を削除するときは、次のことを行う必要があります。デフォルトの属性に依存している場合を除き、Cookie の設定に使用されたものとまったく同じパスとドメイン属性を渡します。

注: 存在しない Cookie を削除しても、例外は発生せず、値も返されません。

名前空間の競合

名前空間 Cookie と競合する危険性がある場合、noConflict メソッドを使用すると、新しい名前空間を定義して元の名前空間を保持できます。これは、ウィジェットの一部としてスクリプトをサードパーティのサイトで実行する場合に特に便利です。 // js-cookie API を別の変数に割り当て、元の "window.Cookies" を復元します

var Cookies2 = Cookies.noConflict();
Cookies2.set(&#39;name&#39;, &#39;value&#39;);
ログイン後にコピー

注: AMD または CommonJS を使用する場合、.noConflict メソッドは必要ないため、.noConflict メソッドは公開されません。

JSON

js-cookie は、Cookie 用の目立たない JSON ストレージを提供します。 Cookie を作成する場合、値に文字列の代わりに配列またはオブジェクト リテラルを渡すことができます。 JSON.stringify:

Cookies.set(&#39;name&#39;, { foo: &#39;bar&#39; });
ログイン後にコピー

に従ってオブジェクトの文字列表現を保存します。デフォルトのCookies.get APIでCookieを読み取る場合、Cookieに保存されている文字列表現を受け取ります:

Cookies.get(&#39;name&#39;); // => &#39;{"foo":"bar"}&#39;
Cookies.get(); // => { name: &#39;{"foo":"bar"}&#39; }
ログイン後にコピー

Cookieを読み取るときCookies .getJSON API を使用すると、JSON.parse:

Cookies.getJSON(&#39;name&#39;); // => { foo: &#39;bar&#39; }
Cookies.getJSON(); // => { name: { foo: &#39;bar&#39; } }
ログイン後にコピー

に従って、Cookie に保存された文字列の解析された表現を受け取ります。 注: IE6-7 (および IE 8 互換モード) をサポートするには、以下を含める必要があります。 JSON-js ポリフィル: https://github.com/douglascrockford/JSON-js

上記は私が皆さんのためにまとめたもので、将来皆さんのお役に立てれば幸いです。

関連記事:

AJAXの原則—非同期および部分リフレッシュを実現する方法

複数のパラメータを渡すためのAjax実装コード

ユーザー名とパスワードを検証するためのAjaxサンプルコード


以上が軽量な JS Cookie プラグイン js-cookie の使用方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

WebSocket と JavaScript を使用してオンライン音声認識システムを実装する方法 WebSocket と JavaScript を使用してオンライン音声認識システムを実装する方法 Dec 17, 2023 pm 02:54 PM

WebSocket と JavaScript を使用してオンライン音声認識システムを実装する方法 はじめに: 技術の継続的な発展により、音声認識技術は人工知能の分野の重要な部分になりました。 WebSocket と JavaScript をベースとしたオンライン音声認識システムは、低遅延、リアルタイム、クロスプラットフォームという特徴があり、広く使用されるソリューションとなっています。この記事では、WebSocket と JavaScript を使用してオンライン音声認識システムを実装する方法を紹介します。

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 に保存されます。等

WebSocket と JavaScript: リアルタイム監視システムを実装するための主要テクノロジー WebSocket と JavaScript: リアルタイム監視システムを実装するための主要テクノロジー Dec 17, 2023 pm 05:30 PM

WebSocketとJavaScript:リアルタイム監視システムを実現するためのキーテクノロジー はじめに: インターネット技術の急速な発展に伴い、リアルタイム監視システムは様々な分野で広く利用されています。リアルタイム監視を実現するための重要なテクノロジーの 1 つは、WebSocket と JavaScript の組み合わせです。この記事では、リアルタイム監視システムにおける WebSocket と JavaScript のアプリケーションを紹介し、コード例を示し、その実装原理を詳しく説明します。 1.WebSocketテクノロジー

モバイル Cookie はどこにありますか? モバイル Cookie はどこにありますか? Dec 22, 2023 pm 03:40 PM

携帯電話上の Cookie は、モバイル デバイスのブラウザ アプリケーションに保存されます: 1. iOS デバイスでは、Cookie は Safari ブラウザの [設定] -> Safari -> [詳細] -> [Web サイト データ] に保存されます; 2. Android デバイスでは、Cookie は保存されますChromeブラウザの設定→サイト設定→Cookieなど

ブラウザの Cookie が保存される場所の詳細な説明 ブラウザの Cookie が保存される場所の詳細な説明 Jan 19, 2024 am 09:15 AM

インターネットの普及により、ブラウザを使用してインターネットを閲覧することが生活様式になりました。ブラウザを日常的に使用する中で、オンラインショッピング、ソーシャルネットワーキング、電子メールなど、アカウントのパスワードを入力する必要がある場面に遭遇することがよくあります。この情報は、次回アクセスするときに再度入力する必要がないようにブラウザによって記録される必要がありますが、このような場合に Cookie が役に立ちます。クッキーとは何ですか? Cookie とは、サーバーからユーザーのブラウザに送信され、ローカルに保存される小さなデータ ファイルを指し、一部の Web サイトでのユーザーの行動が含まれています。

JavaScript と WebSocket: 効率的なリアルタイム天気予報システムの構築 JavaScript と WebSocket: 効率的なリアルタイム天気予報システムの構築 Dec 17, 2023 pm 05:13 PM

JavaScript と WebSocket: 効率的なリアルタイム天気予報システムの構築 はじめに: 今日、天気予報の精度は日常生活と意思決定にとって非常に重要です。テクノロジーの発展に伴い、リアルタイムで気象データを取得することで、より正確で信頼性の高い天気予報を提供できるようになりました。この記事では、JavaScript と WebSocket テクノロジを使用して効率的なリアルタイム天気予報システムを構築する方法を学びます。この記事では、具体的なコード例を通じて実装プロセスを説明します。私たちは

簡単な JavaScript チュートリアル: HTTP ステータス コードを取得する方法 簡単な JavaScript チュートリアル: HTTP ステータス コードを取得する方法 Jan 05, 2024 pm 06:08 PM

JavaScript チュートリアル: HTTP ステータス コードを取得する方法、特定のコード例が必要です 序文: Web 開発では、サーバーとのデータ対話が頻繁に発生します。サーバーと通信するとき、多くの場合、返された HTTP ステータス コードを取得して操作が成功したかどうかを判断し、さまざまなステータス コードに基づいて対応する処理を実行する必要があります。この記事では、JavaScript を使用して HTTP ステータス コードを取得する方法を説明し、いくつかの実用的なコード例を示します。 XMLHttpRequestの使用

See all articles