2

訪問者に Cookie について知らせるバナーを Web サイトに表示する作業を行っています。jqueryを使用してこのバナーを適用したいのですが、人々が「OK」をクリックすると消えるはずです。その部分はできますが、24 時間後に再度サイトにアクセスした場合に再度表示されるようにしたいです。クッキーでこれを行うことができると思いますが、どうすればよいかわかりません。誰かが私を正しい方向に向けることができますか?

4

4 に答える 4

1

クリック時に現在の日付を追加して、localStorage を使用します。

var curDate = new Date();

$('#Button').on('click',function(){
    localStorage['banner'] = curDate.getDate();
});

次に、存在するかどうかを確認し、日付を比較します。

if(localStorage['banner'].length > 0){
    var future = new Date();
    future.setDate(localStorage['banner'] + (24 * 60 * 60 * 1000));

    if(future > curDate){
        localStorage['banner'].length = 0;
    }
}

これは、Cookie と同じように、同じブラウザーを使用している場合に機能します。これは IE8 以降でのみ機能し、世界中のユーザーの 99.2% のみを対象としていることに注意してください。

于 2013-09-04T17:44:04.217 に答える
0

この問題を解決するfreshVistor(howFresh)には、オプションの引数を受け入れて「新鮮」と表示する新鮮さを定義する非常に単純な関数を作成します。

function freshVisitor(howFresh) {
    var namespace = 'freshVisitorSOCookie';
    if (readCookie(namespace)) {
        return false;
    }
    return makeCookie(namespace, 'yes', {
        expires: howFresh || 1
    });
}

アプリケーションは次のようにfreshVisitor()関数を使用できます。

if (freshVisitor()) {
    /* This means the user is new or has not visited within 1 day
     * So show your banner or do something that you want to do */
} else {
    /* The user has visited already within the previous day
     * or has disabled cookies. */
}

「fresh:」の独自の定義を指定することもできます。

if (freshVisitor(2)) ... /* uses a 2-day period to calculate freshness */

ご注意ください！ユーザーの使いやすさのために、ユーザーが Cookie を無効にしている場合、この関数は自動的に false を返すようにしました。これは、Cookie を使用していないユーザーがバナー広告で圧倒される状況を防ぐためです。これが私のウェブサイトを訪問する人々を扱う正しい方法だと思いますが、この敬意を払う行動を逆転させたい場合は、私のfreshVisitor()コード内のロジックを自由に調整してください.

もちろん、上記の表記法を使用して有効期限を計算できる適切な Cookie 関数が必要なので、完全なコードを次に示します。

<script>
    function makeCookie(name, value, p) {
        var s, k;

        function reldate(days) {
            var d;
            d = new Date();
            d.setTime(d.getTime() + days * 86400000);
            return d.toGMTString();
        }
        s = escape(name) + '=' + escape(value);
        if (p)
            for (k in p) {

                /* convert a numeric expires value to a relative date */

                if (k == 'expires')
                    p[k] = isNaN(p[k]) ? p[k] : reldate(p[k]);

                /* The secure property is the only special case
here, and it causes two problems. Rather than
being '; protocol=secure' like all other
properties, the secure property is set by
appending '; secure', so we have to use a
ternary statement to format the string.

The second problem is that secure doesn't have
any value associated with it, so whatever value
people use doesn't matter. However, we don't
want to surprise people who set { secure: false }.
For this reason, we actually do have to check
the value of the secure property so that someone
won't end up with a secure cookie when
they didn't want one. */

                if (p[k])
                    s += '; ' + (k != 'secure' ? k + '=' + p[k] : k);
            }
        document.cookie = s;
        return readCookie(name) == value;
    }

    function readCookie(name) {
        var s = document.cookie,
            i;
        if (s)
            for (i = 0, s = s.split('; '); i < s.length; i++) {
                s[i] = s[i].split('=', 2);
                if (unescape(s[i][0]) == name)
                    return unescape(s[i][1]);
            }
        return null;
    }

    function removeCookie(name) {
        return !makeCookie(name, '', {
            expires: -1
        });
    }

    function freshVisitor(howFresh) {
        var namespace = 'freshVisitorSOCookie';
        if (readCookie(namespace)) {
            return false;
        }
        return makeCookie(namespace, 'yes', {
            expires: howFresh || 1
        });
    }

    document.write('Fresh visitor status: ', freshVisitor());
</script>
于 2013-09-04T18:06:14.287 に答える