ホームページ > ウェブフロントエンド > jsチュートリアル > jqueryでクッキーを操作します

jqueryでクッキーを操作します

Christopher Nolan
リリース: 2025-02-24 10:40:11
オリジナル
868 人が閲覧しました

Working with Cookies in jQuery

キーポイント

    JQueryプラグインであるjquery.cookieは、Cookieの作成、読み取り、削除のプロセスを簡素化します。 Githubのコードベースからダウンロードし、jQueryライブラリの後にページに含まれる必要があります。
  • Cookie()メソッドは、Cookieの作成と読み取りに使用されます。 Cookieを作成するには、名前と値の2つのパラメーターが必要です。オプションの3番目のパラメーターは、パス、ドメイン、有効期限、セキュアなどの追加オプションを含むオブジェクトリテラルを含むことができます。 Cookieを読むには、名前パラメーターのみが必要です。
  • removeCookie()メソッドを使用してCookieを削除します。 Cookie(パスやドメインなど)を作成するときに使用されるのと同じオプションを渡す必要があります。
Cookieは、クライアントがデータを保存するための一般的なテクノロジーです。私の以前の記事「JavaScriptでCookieを処理する方法」は、ネイティブJavaScriptを使用してCookieでCRUD操作を実行する方法を説明しています。この記事はjQueryに頼られ、jquery.cookieプラグインをガイドします。これにより、Cookieはシンプルになります。この記事では、読者は前述の記事の内容に精通しているか、少なくともCookieの基本的な理解を持っていると想定しています。これ以上苦労せずに、始めましょう。

jquery.cookieのインストール

最初に、GitHubのコードベースからjquery.cookieをダウンロードする必要があります。 jquery.cookie.jsファイルを取得したら、ページに追加するだけです。 jQueryプラグインとして、jqueryライブラリの後にそれを含める必要があることに注意してください。ページには、次のコードに類似したセクションが含まれている必要があります。

<🎜>
<🎜>
ログイン後にコピー
ログイン後にコピー
メソッド

jQuery.cookieは同じメソッドCookie()を使用してCookieを作成および読み取りますが、パラメーターの数は異なります。 Cookieを作成するには、Cookieの名前と価値の2つのパラメーターを渡す必要があります。 3番目のオプションパラメーターを渡すことができます。これは、いくつかの追加オプションを備えたオブジェクトリテラルです。これらのオプションは、パス、ドメイン、期限切れ、および安全です。これらのオプションは、Cookie()メソッドを呼び出すとき、または$ .cookie.defaultsオブジェクトを介してグローバルに呼び出すときにローカルに設定できることに注意してください。前者で設定されたオプションは、後者のオプションセットよりも優先されます。 Cookieの作成方法を理解するには、いくつかの例を見てみましょう。次の例では、ユーザーがWebサイトにアクセスする回数を追跡します。

この例は、ユーザーのお気に入りの都市を保存し、クッキーが読み書きできるドメインとパスを指定します。

$.cookie("visits", 10);
ログイン後にコピー
ログイン後にコピー
この例には、ユーザーの名前が保存されています。このCookieは、2013年10月29日午前11:00に期限切れになり、安全な接続を介してのみ送信できます。

$.cookie("favourite-city", "London", {path: "/", domain: "jspro.com"});
ログイン後にコピー
ログイン後にコピー
Cookieを読む

クッキーを読むのはとても簡単です。次の例に示すように、1つのパラメーター、つまりCookieの名前を渡すだけで読む必要があります。ユーザーがWebサイトにアクセスする回数をお読みください。
$.cookie("name", "Aurelio", {expires: new Date(2013, 10, 29, 11, 00, 00), secure: true});
ログイン後にコピー
ログイン後にコピー

ユーザーのお気に入りの街をお読みください:

ユーザーの名前を読む:
console.debug($.cookie("visits")); // 打印 "10"
ログイン後にコピー
<🎜>
<🎜>
ログイン後にコピー
ログイン後にコピー

クッキーを削除

今、あなたはクッキーの作成と読み方を知っています。最後に知っておく必要があるのは、RemoveCookie()メソッドを使用してCookieを削除する方法です。要求されたCookieが見つかった場合にtrueを返し、それ以外の場合はFalseを返します。 Cookieを削除する場合は、パスやドメインなどの同じオプションを渡す必要があることに注意してください。そうしないと、操作が失敗することに注意してください。次に、RemoveCookie()メソッドのいくつかの例を見てみましょう。サイトへの訪問数を保存するCookieを削除します:

$.cookie("visits", 10);
ログイン後にコピー
ログイン後にコピー

都市のようなユーザーを保存するCookieを削除:

$.cookie("favourite-city", "London", {path: "/", domain: "jspro.com"});
ログイン後にコピー
ログイン後にコピー

次に、ユーザーの名前を保存するCookieを削除しようとします。安全な値が指定されていないため、この例は失敗します。

$.cookie("name", "Aurelio", {expires: new Date(2013, 10, 29, 11, 00, 00), secure: true});
ログイン後にコピー
ログイン後にコピー

結論

この記事では、jquery.cookie(jqueryプラグイン)を使用してCookieを管理する方法を示します。 Cookieの実装の詳細をいくつかのシンプルで柔軟な方法に抽象化することにより、多くの問題を解決します。さらに指示やその他の例が必要な場合は、公式のドキュメントを参照してください。 この記事を読みたい場合は、学習できることを気に入るはずです。メンバーは、SitePointのすべての電子書籍と、JQuery:NewbieからNinjaまでのインタラクティブなオンラインコース:新しいヒントとヒントに即座にアクセスできます。この記事のコメントは閉じられています。 jqueryについて質問がありますか?フォーラムで質問してみませんか? * JQuery Cookie(FAQ)

に関する faqs

jQueryを使用してクッキーを設定する方法は?

jQueryでクッキーを設定するのは非常に簡単です。 $ .cookie関数を使用してCookieを設定できます。例は次のとおりです。

$。cookie( 'cookie_name'、 'cookie_value');

この例では、「cookie_name」はcookieの名前であり、「cookie_value」はcookieに保存される値です。これにより、ブラウザセッションの終了時に期限切れになるCookieが作成されます。特定の有効期限を設定する場合は、3番目のパラメーターとしてオプションオブジェクトを追加できます。

$。cookie( 'cookie_name'、 'cookie_value'、{expires:7});

これにより、7日後に期限切れになるCookieが作成されます。

jQueryを使用してクッキーを読む方法は?

また、jQueryを使用してCookieを読むのは非常に簡単です。 $ .cookie関数を再度使用できますが、今回は2番目のパラメーターを使用せずに使用できます。例は次のとおりです。

var cookie_value = $ .cookie( 'cookie_name');

この例では、「cookie_name」は読み取られるCookieの名前です。この関数は、Cookieの値を返します。

jQueryを使用してCookieを削除する方法は?

jQueryを使用してCookieを削除するには、$ .REMOVECOOKIE関数を使用できます。例は次のとおりです。

$。RemoveCookie( 'cookie_name');

この例では、「cookie_name」は削除されるCookieの名前です。これにより、ブラウザからCookieが削除されます。

(後続のFAQ回答は以前の出力に似ています。ここでは、回答を簡潔に保つために、複製コンテンツは省略されています。)

以上がjqueryでクッキーを操作しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート