CODEWITHSUNDEEP
javascriptphpjqueryhtmlcookies
YaddyVirus
YaddyVirus

Reputation: 301

Trying to make a webpage refresh counter

I want to count the number of times my web page is "refreshed". Then display a message on the page along with the number of refreshes.

For e.g- on the first refresh, the following statement shows up - "1 refresh, keep going" and so on. The sentences will keep changing with the number of refreshes. I need to print up to 10 sentences at least.

Initially, I thought that I'll just put the sentences in an array and then use cookies to count the number of refreshes and then display the corresponding sentence according to the number of refreshes.
However, cookies are a problem as they store strings and not integers. I tried using the Number() and parseInt() functions but they don't seem to work and for some reason using JavaScript for this messes up my entire web page.

Then I thought of using sessions in PHP. They also seemed nice at first approach and my kind of thing (because I don't like doing anything on the client side). But they also don't work and I get half of my print statement on my web page. No counter, nothing.

I have read the previous questions.
I have tried cookies.
I have tried sessions.

My PHP file for counter - 

<?PHP
session_start();

if(isset($_SESSION['views'])) {
    $_SESSION['views'] = $_SESSION['views']+ 1;
} else {
    $_SESSION['views'] = 1;
}
echo "Total page views = ". $_SESSION['views'];
?>

My index.html file contains this script at the end to run the above script which is stored in a different file named counter.php.

<?php
echo "<hr><div align=\"center\">";
    include_once "counter.php"; // this will include the counter.
echo "</div>";
?>

However, when I load my page I only get "; include_once "counter.php"; // this will include the counter. echo ""; ?> at the bottom.

Any solution is welcome. Cookies or Sessions or whatever. I need to get this thing up and running.

P.S- very sorry but I can't really provide the link to my web page as I have to keep it confidential up to the 15th of February, 2017.

Upvotes: 3

Views: 6084

Answers (2)

Abhinav
Abhinav

Reputation: 1200

Use cookies there are lots of cookies plugin available like cookies.js

Edit ---

I assume you are using cookies plugin.. I've used https://github.com/js-cookie/js-cookie

JS Code for this ---

$(function () {
    RefreshCode();
})

function RefreshCode()
{
    var counter = Cookies.get('counter');
    if (!counter) {
        Cookies.set('counter', 1);
    } else {
        counter++;
        Cookies.remove('counter');
        Cookies.set('counter', counter);
    }
    console.log(Cookies.get('counter'));
}

This is fully working example for your reference....

HTML Code for this ---

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>

    <script src="jquery-3.1.1.min.js"></script>
    <script src="js.cookie.js"></script>
    <script src="CustomCounter.js"></script>
</body>
</html>

Hope this Help...

Upvotes: 2

Rory McCrossan
Rory McCrossan

Reputation: 337627

You can still achieve what you require using cookies, or even localStorage or sessionStorage. You just need to get the value on load of the page and show it, before incrementing the value when the page is reloaded. Try this:

<h1></h1>
<button>Refresh</button>

var refreshes = parseInt(sessionStorage.getItem('refreshes'), 10) || 0;
$('h1').text('Refreshed ' + refreshes + ' time(s)');

$('button').click(function() {
    sessionStorage.setItem('refreshes', ++refreshes);
    window.location.reload();
})

Example fiddle

Upvotes: 1

Related Questions