Javascript cookieの有無で要素の表示・非表示を切り替える

Javascriptを使ってCookieの有無で要素の表示と非表示を切り替えることができます。Cookieがない場合は要素を非表示にしてCookieの値をセット。Cookieがある場合は要素を表示するといった処理で実現できます。

Javascript

前提

• jQuery

$(function(){
    if(getCookie('cookieFlg')){
        // cookieあるとき
        $('.cookie-box').show();
    }else{
        // cookieないとき
        $('.cookie-box').hide();
        document.cookie = "cookieFlg=1; max-age=86400"; //cookie挿入（max-age 秒指定 86400秒＝1日）
    }
});


function getCookie( name ){
    var result = null;
    var cookieName = name + '=';
    var allcookies = document.cookie;
    var position = allcookies.indexOf( cookieName );
    if( position != -1 ){
        var startIndex = position + cookieName.length;
        var endIndex = allcookies.indexOf( ';', startIndex );
        if( endIndex == -1 ){
            endIndex = allcookies.length;
        }
        result = decodeURIComponent( allcookies.substring( startIndex, endIndex ) );
    }
    return result;
}

document.cookie

max-age

Cookieの有効期限を秒で指定します。

デザインを本で学びたい人向けの記事

初心者ノンデザイナーがこれからデザインを勉強するのにおすすめの本 4選