[英]How do I show a message box only the first time a page loads, using JavaScript / jQuery?
I want to show a message box , only the first time a webpage loads. 我想显示一个消息框 ,只是第一次加载网页。 If the user refreshes, it should no longer show up. 如果用户刷新,则不应再显示。 The message should show up regardless of whether the user is already logged in or not. 无论用户是否已登录,都应显示该消息。
Are cookies the only way to do this or there are any JavaScript library which can take of this? Cookie是唯一可以做到这一点的方法,还是有任何JavaScript库可以解决这个问题? The technology stack is jQuery /JavaScript and PHP. 技术堆栈是jQuery / JavaScript和PHP。
Cookies is not the only way, you can use localStorage
, Try this: Cookies不是唯一的方法,你可以使用localStorage
,试试这个:
if(localStorage.getItem("firstTime")==null){
alert("First Time Alert");
localStorage.setItem("firstTime","done");
}
You should use your server side language(php) to store a session variable. 您应该使用服务器端语言(php)来存储会话变量。 Sessions store data across page loads. 会话在页面加载中存储数据。
If you have some way of preserving the state of the user (if they have visited that page or not), then you could pass that to the page and tell it to show the message while flagging the page as 'visited' on the server side (in the database, or wherever you are keeping that user/page data). 如果您有某种方法可以保留用户的状态(如果他们已经访问过该页面),那么您可以将其传递给页面并告诉它在服务器端将页面标记为“已访问”时显示该消息(在数据库中,或者保存该用户/页面数据的任何位置)。
If you aren't maintaining that information anywhere, then you'll need to use cookies, or localStorage; 如果您没有在任何地方维护该信息,那么您将需要使用cookie或localStorage; however, this data can be lost (if the user clears it), and then the message will show again. 但是,此数据可能会丢失(如果用户清除它),然后该消息将再次显示。
Here is a really good lightweight plugin that I use sometimes. 这是一个非常好的轻量级插件,我有时使用。
// plugin start //
// First Time Visit Processing
// copyright 10th January 2006, Stephen Chapman
// permission to use this Javascript on your web page is granted
// provided that all of the below code in this script (including this
// comment) is used without any alteration
function rC(nam) {var tC = document.cookie.split('; '); for (var i = tC.length - 1; i >= 0; i--) {var x = tC[i].split('='); if (nam == x[0]) return unescape(x[1]);} return '~';} function wC(nam,val) {document.cookie = nam + '=' + escape(val);} function lC(nam,pg) {var val = rC(nam); if (val.indexOf('~'+pg+'~') != -1) return false; val += pg + '~'; wC(nam,val); return true;} function firstTime(cN) {return lC('pWrD4jBo',cN);} function thisPage() {var page = location.href.substring(location.href.lastIndexOf('\/')+1); pos = page.indexOf('.');if (pos > -1) {page = page.substr(0,pos);} return page;}
// plugin finish //
// example code to call it - you may modify this as required
function start() {
if (firstTime(thisPage())) {
// this code only runs for first visit
alert('welcome');
}
// other code to run every time once page is loaded goes here
}
onload = start;
Example http://javascript.about.com/library/blfirst1.htm 示例http://javascript.about.com/library/blfirst1.htm
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.