プログラミング言語や環境設定を中心としたパソコン関連の技術メモです。
主にシステム開発中に調べたことをメモしています。TIPS的な位置付けで、気が向いたときにちまちま更新していきます。
JavaScript、cookieを簡単に操作する
結論から書くと、jQueryプラグインの「jquery.cookie.js」を使うのが一番簡単でした。
作ってくださった方、ステキ過ぎですヾ(*´∀`*)ノ

肝心の本体は以下のURLからダウンロードできます。

https://github.com/carhartl/jquery-cookie

「あれ?どこからダウンロードできるの?」と戸惑った方は、
「○releases」って書いてあるリンクをポチっと押して

20141209-01.png


遷移先の画面で緑色で「jquery.cookie-1.4.1.min.js」って書いてあるボタンを押してください。

20141209-02.png


それで普通にダウンロードできるはずです。

使い方も、とっても簡単でした(*´ェ`*)

例えば、こんな感じでjQueryと一緒に読み込めばφ(--)

<script src="./jquery-1.11.1.min.js"></script>
<script src="./jquery.cookie-1.4.1.min.js"></script>

準備は完了です。

$.cookie("【キー】", "【値】");

でcookieに値を保存できます。

cookieから値を読み込むのは

$.cookie("【キー】");

です。
ついでに

$.removeCookie("【キー】");

でcookieから値を削除できます。

あとは

$.cookie("【キー】", "【値】",{ expires: 7, path: "/", domain: 'example.com', secure: true });

のような形で、cookieの有効期限、パス、ドメイン、HTTPS時のみcookieを送信するか指定できます。

基本的な使い方はそんな感じですね。

一つ注意点として、cookieに値を保存する際は

$.cookie("【キー】", "【値】",{ expires: 7 });

のように必ず有効期限を指定してしてください。
有効期限を指定しないと、ブラウザを閉じたタイミングでcookieが破棄されます。

まぁ、破棄されて構わない人は気にしなくて良いですけどね。
それだとcookieを使う意味があまり無いんじゃないかと(^^;

注意点としてはそれくらいです。

最後に、しょぼしょぼですがサンプルを載せておきますねφ(--)

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <script src="./jquery-1.11.1.min.js"></script>
    <script src="./jquery.cookie-1.4.1.min.js"></script>

<script type="text/javascript">
    $(document).ready(function(){
        //cookieに保存
        $('#btn1').click(function(){
            $.cookie("key1", $('#txt1').val(), { expires: 7 });
            alert($('#txt1').val() + " saved");
        })

        //cookieの値を表示
        $('#btn2').click(function(){
            var str1 = $.cookie("key1");
            alert(str1);
        })

        //cookie削除
        $('#btn3').click(function(){
            $.removeCookie("key1");
            alert("deleted");
        })
    });
</script>

</head>
<body>

<input type="text" name="txt1" id="txt1"><input type="button" name="btn1" id="btn1" value="cookieに保存"><br>
<input type="button" name="btn2" id="btn2" value="cookieの中身を表示"><br>
<input type="button" name="btn3" id="btn3" value="cookieを削除"><br>

</body>
</html>

JavaScriptファイルは、HTMLファイルと同階層に置いてある前提です。
また、IE、Chrome、Safariをお使いの場合、ローカル環境では動かないと思います。
動作確認は、適当なWebサーバに放り込んで行ってください。

……と思ったのですが、私が借りているサーバにも置いてみました。
以下のURLから動作確認できます。

http://i-3-i.info/test_blog/20141209/index.html

そんな感じ\(--)/
スポンサーリンク
 
このエントリーをはてなブックマークに追加 

category:● JavaScript  thema:パソコンな日々 - genre:コンピュータ  Posted by ササキマコト 

  関連記事