jquery - 每次访问只运行一次 JQuery 函数

Question

我有一个简单的 JQuery 函数 - 只是在索引页面上淡出一个 div：

$('#startup').delay(1500).fadeOut(2000);

这只是一个启动屏幕，其中包含用户第一次访问该站点时看到的消息。

我想知道是否有人知道每次访问只显示一次启动消息的方法。EG：如果用户从 aboutus 页面导航回索引页面，我不希望启动 div 再次出现。

有谁知道实现这一目标的方法？

谢谢！

Answer 1

您可以将访问时间存储在 localStorage 中并检查它。

var now = (new Date()).getTime();
var lastTime = 0;
var lastTimeStr = localStorage['lastTime'];
if (lastTimeStr) lastTime = parseInt(lastTimeStr, 10);
if (now - lastTime > 24*60*60*1000) {
     // do animation
} 
localStorage['lastTime'] = ""+now;

编辑：我做了一个小提琴来演示它：

http://jsfiddle.net/dystroy/jAjLB/

您将在第一次看到动画，但不是第二次，除非您等待一分钟（您可以将其设置为您的站点的几个小时）。

Answer 2

您可以设置一个 cookie，可以检查这是否是第一次访问。

如果您希望它显示“每次访问”，可以将其设置为在会话结束时过期。

Answer 3

我会为此使用 localstorage... Cookie 与页面标题一起发送，如果服务器不关心此值，则无需使用它们。

 /* Here are some utility localStorage functions */
    function store_data(data, key) {
        if (!window.localStorage || !window.JSON) {
            return;
        }
        key = key || data_key;
        localStorage.setItem(key, JSON.stringify(data));
    }

    function get_data(key) {
        if (!window.localStorage || !window.JSON) {
            return;
        }
        key = key || data_key;
        var item = localStorage.getItem(key);

        if (!item) {
            return;
        }

        return JSON.parse( item );
    }

    function remove_data(key) {
        if (!window.localStorage || !window.JSON) {
            return;
        }
        key = key || data_key;
        localStorage.removeItem(key);
    }
   /* and the check */ 
   var now = (new Date()).getTime(),
       then = parseInt(get_data('last_visit'), 10) || 0,
       diff = now - then;
    if( diff > 24*60*60*1000 ) {
       $('#startup').delay(1500).fadeOut(2000);
       store_data('last_visit', (new Date()).getTime());
    }