document.cookieは、全クッキーを取得もしくは設定するプロパティ。
構文
取得
$allCookies = document.cookie;
戻り値
クッキーをセミコロン区切りで格納したリスト。
設定
document.cookie = cookieData;
サンプル
keyAの値は、
keyBの値は、
サンプルの動作について
「sampleCookie」ボタンをクリックすると、「keyAの値は、」の右横に「valueA」、「keyBの値は、」の右横に「valueB」と表示する。
サンプルのソースコード
JavaScript
<script type="text/javascript">
function sampleCookie() {
document.cookie = "keyA=valueA";
document.cookie = "keyB=valueB";
var $varA = document.cookie.replace( /(?:(?:^|.*;\s*)keyA\s*\=\s*([^;]*).*$)|^.*$/, "$1" );
document.getElementById( "sampleA" ).innerHTML = $varA;
var $varB = document.cookie.replace( /(?:(?:^|.*;\s*)keyB\s*\=\s*([^;]*).*$)|^.*$/, "$1" );
document.getElementById( "sampleB" ).innerHTML = $varB;
}
</script>
function sampleCookie() {
document.cookie = "keyA=valueA";
document.cookie = "keyB=valueB";
var $varA = document.cookie.replace( /(?:(?:^|.*;\s*)keyA\s*\=\s*([^;]*).*$)|^.*$/, "$1" );
document.getElementById( "sampleA" ).innerHTML = $varA;
var $varB = document.cookie.replace( /(?:(?:^|.*;\s*)keyB\s*\=\s*([^;]*).*$)|^.*$/, "$1" );
document.getElementById( "sampleB" ).innerHTML = $varB;
}
</script>
HTML
<button onclick="sampleCookie();">sampleCookie</button>
<div style="margin: 1em;">
<p>keyAの値は、<span id="sampleA"></span></p>
<p>keyBの値は、<span id="sampleB"></span></p>
</div>
<div style="margin: 1em;">
<p>keyAの値は、<span id="sampleA"></span></p>
<p>keyBの値は、<span id="sampleB"></span></p>
</div>
ライブラリやプラグインが便利
クッキーの取得や設定には、ライブラリやプラグインを使うと便利だ。
- Cookies
- クッキー操作ライブラリ。
- jQuery Cookie
- jQuery Cookie は、クッキーを、取得、作成、削除できる軽量なjQueryプラグイン。