尝试制作网页刷新计数器

Question

我想数一下我的网页被“刷新”的次数。然后在页面上显示一条消息以及刷新的次数。

例如，在第一次刷新时，下面的语句显示-- "1刷新，继续执行“等等。句子将随着复习次数的增加而不断变化。我至少要打印10个句子。

最初，我认为我只需要将句子放在一个数组中，然后使用cookie来计数刷新的次数，然后根据刷新的数量显示相应的句子。

但是，cookie是一个问题，因为它们存储字符串而不是整数。我试过使用Number()和parseInt()函数，但它们似乎不起作用，而且出于某种原因，使用JavaScript来处理这个问题会扰乱我的整个网页。

然后，我想到在PHP中使用会话。在最初的方法和我喜欢的事情上，他们看起来也不错(因为我不喜欢在客户端做任何事情)。但是它们也不起作用，我在我的网页上得到了一半的打印声明。没有计数器什么都没有。

我读过前面的问题。

我试过饼干。

我试过了。

我的PHP文件-

<?PHP
session_start();

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

我的index.html文件在末尾包含这个脚本，以运行上面的脚本，该脚本存储在另一个名为counter.php的文件中。

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

然而，当我加载我的页面时，我只得到底部的"; include_once "counter.php"; // this will include the counter. echo ""; ?>。

任何解决办法都是受欢迎的。饼干或会议什么的。我要把这东西弄起来然后运行。

很抱歉，我不能提供到我的网页的链接，因为我必须保密到2017年2月15日。

Answer 1

您仍然可以使用cookie，甚至使用localStorage或sessionStorage来实现所需的功能。您只需要在加载页面时获取值并显示它，然后在重新加载页面时增加值。试试这个：

<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

Answer 2

使用cookies有很多像cookies.js这样的cookies插件

编辑--

我猜你在使用cookie插件..。我用过https://github.com/js-cookie/js-cookie

JS代码

$(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'));
}

这是充分发挥作用的例子，供您参考..。

HTML代码

<!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>

希望这能帮上忙。