HTMLのチェックボタンの状態を保存する。 ( HTML , JQuery )

動機
Cookieをつかう
1. jquery.cookie.js
コード
1. HTML
2. Javascript
おわりに

動機

エロ画像サイトをつくってるのですが、画像の下に詳細ボタンをつけてみました。もちろん便利だが、ない方がよいときもあります。そこで、チェックボタンで表示を管理できたら….. と思いました。

Cookieをつかう

普通にやるとページを変わるとチェックが外れます。GET や POST リクエストで管理しようかと思いましたが、とんと見当がつかぬ。(笑) そもそも HTTP通信が一回きりの通信なのが問題です。

そこで賢い人たちは cookie というもので疑似的に接続していることにしました。cookie データを送受信し、細かいデータの管理ができるのです。例えば一度ログインすると、ページを閉じてもブラウザを閉じても、しばらくログインせずともログイン状態が維持されるのは、cookieでデータを管理してるおかげなのです！

つまり、cookieにチェックボタンの情報を保存すれば良いのかなと思いました。cookie はどうも難しそうで敬遠してましたが、そろそろ触らねば……

jquery.cookie.js

幸い jquery.cookie.js というライブラリがありました。😙 何をやるにも開発してくれてる方がいて、本当に助かります。自分もいずれ開発しよう。いずれ……. (笑)

見たところ、github しかないので、ダウンロードしてサーバーにあげます。別に、他のやり方でもかまいませんよ！

コード

HTML

まずはHTML。

適当でよいですけど、クラス名は Javascriptに合わせるため check-cookie にするのと、識別するために id か name は設定してください。

 <script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="jquery.cookie.js"></script>

<input type="checkbox" name="check-box" class="check-cookie">

jquery.cookie.js のパスはご自身の環境に合わせてください。

Javascript

$(".check-cookie").click(function(e){
    id=$(this).attr("id") || $(this).attr("name");
    if($(this).prop("checked")){
        $.cookie(id,1);
    }
    else{
        $.cookie(id,0);
    }
});
$(".check-cookie").each(function(index,e){
    id=$(this).attr("id") || $(this).attr("name");
    if($.cookie(id) == 1){
        $(this).click();
    }
});

大きくは、

クリック時の処理
ページ読み込み時の処理

にわかれます。

クリック時に cookie を設定し、読み込み時に cookie を確認し、設定されてたらチェックをいれます。

おわりに

神は細部に宿る

といいますよね。どこまで見られるかわかりませんが、細かいところをつくるのは楽しいです。(笑) cookie は色々応用できそうですね。