CookieSave - JavaScript でクッキーを血ヘドが出るほど簡単に使うライブラリ

ダウンロード (cookiesave.js / 4kb) ※右クリックから名前をつけて保存。

XREAAD

これは何?

Cookie の一般的な使用目的というのは、大きく分けて以下の二つに分けられるのではないかと思います。

  1. 個人識別用(セッション管理やトラッキング)
  2. 入力項目の保存(例えば掲示板において、一度投稿したら名前などを記録しておき次回から入力する手間を省く等)

前者はサーバ側の対応が必要なので JavaScript の出番は殆どありませんが、後者は JavaScript を使えばクライアント側だけでも対応可能です。CookieSave は、後者目的の Cookie 使用を非常に簡単化する JavaScript ライブラリです。

ライセンス

MIT-License

対象者と、使用方法

自作掲示板スクリプトの基礎が完成したけど、Cookie を使ったフォーム保存の実装めんどい!とお嘆きの貴方。

CookieSave を使えば、その自作スクリプトの出力 HTML 中の適当な箇所に以下の一行を追加するだけでフォーム保存が可能になります。

<script type="text/javascript" src="cookiesave.js" charset="UTF-8"></script>

特に必要が無ければこの一行だけで充分ですが、さらに細かい設定を行いたい場合 script 要素を追加して、以下のように設定を行います。(設定する必要の無い項目の行は削除して構いません。)

<script type="text/javascript">
    CookieSave.forms    = ["myform"];
    CookieSave.elements = ["name", "mail", "url"];
    CookieSave.expires  = 30*24*60*60*1000;
    CookieSave.domain   = "example.co.jp";
    CookieSave.path     = "/mybbs/";
    CookieSave.secure   = true;
</script>

各項目の解説

CookieSave.form

入力項目を保存しておきたいフォームの id か、フォームの番号( 0 スタート)を設定します。

CookieSave.forms = ["form1", 2]; // form#form1 と、3番目のフォームを保存。

設定しなかった場合、全てのフォームを保存します。

CookieSave.elements

フォーム中で、入力項目を保存しておきたい要素の name を設定します。

ただし、以下の要素以外は name を設定しても保存はしません。(input[@type='hidden']とか)

  • input[@type='text']
  • input[@type='password']
  • input[@type='radio']
  • input[@type='checkbox']
  • select
  • textarea

設定しなかった場合、 textarea 以外の 上記要素を全て保存します。

CookieSave.expires

Cookie の有効期限を設定します。単位はミリ秒なので、例えば 90日間 Cookie を有効にしたいなら 90*24*60*60*1000 とします。デフォルトは 30日。

CookieSave.domain
CookieSave.path
CookieSave.secure

Cookie の仕様を参照のこと。

FAQ という名の作者の言い訳コーナー

Q. JavaScript を使うって事は、JavaScript 切っている人には通用しないって事ですよね?

A. JavaScript 切っているような奴は Cookie もどうせ切っているからいいんです。(例:私)

作者

猫と重金属
http://massacre.s59.xrea.com/
heavymetalandcat@gmail.com