ホームページ  >  記事  >  ウェブフロントエンド  >  軽量な JS Cookie プラグイン js-cookie の使用方法

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

亚连
亚连オリジナル
2018-05-26 15:51:211956ブラウズ

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 までご連絡ください。