PHP、JS 查看计数器并保存答案

【问题标题】：PHP, JS View Counter and SavePHP、JS 查看计数器并保存
【发布时间】：2021-04-10 01:51:15
【问题描述】：

我尝试在 js 中为我的网页制作一个查看计数器。

当您查看页面时，计数器会增加 1。

显示计数的数字。

但有一件事不起作用：当我从另一台设备查看网站时，计数器从 0 开始。

所以我使用 localStorage 来存储数据。但是我希望当我从笔记本电脑看到页面时，计数器增加一。当我通过手机查看页面时，计数器应该已经显示数字 1，并且应该增加 1，因此计数器将为 2。

我不知道如何使它可行。仅使用 LocalStorage 完成。我想我应该通过将数据存储在 .txt 文件中来保存数据，但它不起作用，因为当文件编写器将数据 (1) 保存到文件中时，它会将下一个视图 (1) 保存在上一个视图旁边数字。如果我想将当前数字添加到上一个数字，它将显示数字 1。

这是我的代码：

var n = localStorage.getItem('profile_1_tech.html');

if (n === null) {
  n = 0;
}

n++;

localStorage.setItem("profile_1_tech.html", n);

document.getElementById('counter').innerHTML = n;

&lt;span&gt;&lt;span id="counter"&gt;&lt;/span&gt; Views&lt;/span&gt;

所以我需要添加结果（1 个视图 + 每个视图 1 个视图），并且所有用户都可以看到相同的数字。

【问题讨论】：

如果您想创建一个在设备之间共享的计数器，您需要将该信息存储在所有设备都可以访问它的地方，例如服务器。仅使用客户端 JavaScript 无法实现这一点。
扩展@Ivar 的评论，之所以出现这种情况，是因为即使在同一设备上加载浏览器时，客户端 JavaScript 上分配的变量也会重置。服务器将允许您进行 API 调用，或连接到 websocket（用于实时更新），或您想使用的任何方法来访问计数器，这些方法将存储在服务器上并在服务器中更新.
所以我无法在 localhost 上使用 websocket？
如果您在两个设备上从 localHost 加载页面，如果您更新文件并在显示之前读取文件，它可以工作。您需要 ajax 文件

标签： javascript html css file local-storage

【解决方案1】：

JavaScript LocalStorage API 只能在一台设备上使用，使用 SessionStorage API 的用处会更少，因为一旦关闭选项卡，内存就会被清除。

由于您的问题标签包含PHP，您可以做的是创建一个帐户系统，该系统会增加您将使用 PHP 存储在 SQL 表中的值，并且每次用户创建帐户时，您都会创建一个新的“视图”字段。

但是，如果您尝试使用查看计数器进行分析以查看有多少人使用您的网站，那么我建议您使用 Google Analytics，因为它是免费的，并且与我前面提到的“帐户系统”方法相比，它需要的代码非常少使用 PHP 将视图存储在数据库中。

【讨论】：