このブログのはてなブックマーク数 このエントリーをはてなブックマークに追加

知らなきゃ絶対損するPCマル秘ワザ

知らなきゃ損するPC情報を分かりやすくメモする個人ブログ。
『月,水,金』の週3回更新!(予定)

このブログ内をキーワードで検索することもできます。
Loading



最新記事
  • iPhone:「iOS 11」にしたらすぐ設定した方が良いことまとめ (09/20)
  • 「ソフトバンク」から「格安SIM」に乗り換えてみた【準備編】 (09/18)
  • 新型 iPhone 「X」「8」 と 「7」 の違いをまとめてみた (09/13)
  • iPhone:Gmailでも「プッシュ」でメールを受信する (09/11)
  • エクセル:複数のセルに同じ内容を一括入力する (09/08)
  • 管理人より
    2200万アクセス突破しました。ありがとうございます。

    JavaScriptで簡単にcookieを扱おう

    このエントリーをはてなブックマークに追加
    JavaScriptを使いこなそう(2)
    【2014/6/11】 大幅に加筆修正しました
    イメージ


    こんにちは、さち です!

    前回は JavaScript の勉強に役立つサイトを紹介しましたが
    今回は実際に JavaScript で cookie を扱う方法をご紹介。

    cookie を扱うプログラムをゼロから作ると大変ですが
    jQuery.js(Ajaxライブラリ) を使えば簡単に実装できます。




    「jquery.cookie.js」を使う

    JavaScript で cookie を扱うには別途 cookie 用のライブラリを用意します。
    様々なライブラリがありますが、今回は「jquery.cookie.js」を使います。

    jquery.cookie.js は単独で使用しても動きません。
    名前から分かるとおり「jQuery.js」が必要です。
    「jQuery.js + jquery.cookie.js」の組み合わせではじめて使えます。




    ライブラリをダウンロードする

    まずは、jQuery.js と jquery.cookie.js がないとはじまりません。
    2つのライブラリをダウンロードしましょう。
    (特に理由がなければ、最新バージョンをダウンロード)

       → 「jQuery.js」のダウンロードページヘ - jQuery公式
       → 「jquery.cookie.js」のダウンロードページヘ - jQuery公式

    「jquery-2.1.1.min.js」のように「min」が付いているのは
    コードから 改行,コメント,空白 などを排除した軽量版です。
    (「min」の有無による機能の違いはありません)
    通常、jQuery.js の中身は見ないので軽量版を使えばよいです。
    jQuery.js のファイルサイズが 3分の1 くらいになります。

    jQuery.js については
    Google DevelopersjQuery公式 から直接読み込んでもOK。
    ただし、相手サーバにトラブルがあった場合は
    自分のサイトの jQuery にも影響が出るので注意。




    使用準備をしよう

    2つのライブラリを使用するページで読み込ませましょう。
    通常、HTML の HEADタグ に外部ファイルとして読み込むことが多いです。
    実際の記述のサンプルは下記のとおり。

    <head>
    <meta http-equiv="Content-Script-Type" content="text/javascript">
    <script type="text/javascript" src="/libs/jquery.js"></script>
    <script type="text/javascript" src="/libs/jquery.cookie.js"></script>
    </head>

    「src="xxxx"」には各ライブラリのパス(保存場所)を記述します。
    パスの記述は、相対パス,絶対パス のどちらでもよいです。

    jquery.cookie.js は jquery.js のプラグインライブラリという扱いなので
    必ず「jquery.js」「jquery.cookie.js」の順に記述しましょう。

    これで、ページで jquery.cookie.js が使えるようになります。




    使い方

    実際に cookie を扱うには JavaScript に次のような記述をします。


    ■ cookie の保存
    $.cookie('名前', '値', { expires: 保存日数 });

    //a に sachi という値を代入
    var a = 'sachi';
    //user_name という cookie に sachi という値を7日間保存
    $.cookie('user_name', a , { expires: 7 });


    ■ cookie の保存(保存期間指定なし)
    保存期間を指定しない場合は自動で 365日 に設定されます。
    $.cookie('名前', '値');

    //user_nameというcookieにsachiという値を365日間保存
    $.cookie('user_name', 'sachi');


    ■ cookie の取得
    保存されている cookie を読み込みます。
    cookie が存在しない場合は、「undefined」が返ってきます。
    var a = $.cookie('名前');

    //user_nameの値を呼び出しaに代入
    var a = $.cookie('user_name');


    ■ cookie の削除
    cookie を削除するには次の3種類の方法があります。
    $.removeCookie('名前');
    $.cookie('名前', null);
    $.cookie('名前', '', { expires: -1 });

    //関数を使って削除
    $.removeCookie('user_name');
    //値をnullにすることで削除
    $.cookie('user_name', null);
    //保存日数をマイナスにすることで削除
    $.cookie('user_name', '', { expires: -1 });


    ■ cookie にオブジェクトで保存/読み込み
    1つの cookie に複数の値を保存する場合はオブジェクトを利用します。
    jquery.cookie.js でオブジェクトの保存/読み込みを行うには
    事前に次の記述を行い JSON を有効にする必要があります(1度だけでOK)。
    $.cookie.json = true;

    var data = {
       first: 'sachi',
       last: 'umino'
    };
    //JSONを有効にする
    $.cookie.json = true;
    //user_nameというcookieにdata(オブジェクト)を保存
    $.cookie('user_name', data);
    //cookieからオブジェクトを読み込んでdataに代入
    data = $.cookie('user_name');


    これで jquery.cookie.js の説明は終わりです。
    特に、簡単にオブジェクトを cookie に保存できるのは便利!
    上手く使いこなして作業を楽にしましょう!

    記事の作成にあたり下記サイト様を参考にさせて頂きました。
    ありがとうございました。

       → javascriptライブラリjQueryでcookieを超簡単に扱う方法 - 4galaxy.net
       → クッキーの操作 - jQuery入門講座
       → carhartl/jquery-cookie - GitHub


    ☆はじめにこの記事から見た方へ☆
    (1)から順に見ていただくと分かりやすくなっています!

    << 前へ | JavaScriptを使いこなそう(2) | 次へ(次回未定) >>
    JavaScriptを使いこなそう TOPへ









    このエントリーをはてなブックマークに追加




    管理人だけが読めるコメントにする(返信はしません)
    【お知らせ】
    • コメントは承認制です。反映に時間がかかります。
    • Yahoo!BBはスパムコメントが多いため一部規制中です。
    • URLを含む投稿はできません。必要な場合は最初のhを削って下さい。
    • 記事に直接関係ない個人のトラブルにはお答えできません。
    • Android は使ったことがないので質問を頂いても答えられません。
    • その他詳細はこちら





    記事別の週間アクセス数ランキングです。こちらの記事もぜひ読んでみて下さい。

    2008-2017 知らなきゃ絶対損するPCマル秘ワザ  無断転載禁止

    ブログパーツ