Как заставить счетчик JS навсегда сохранить количество счетчиков? - PullRequest
Новая
       23

Как заставить счетчик JS навсегда сохранить количество счетчиков?

0 голосов
/ 14 мая 2019

Я пытаюсь создать страницу на моем Tumblr, на которой есть кнопка, которая подсчитывает, сколько раз она была нажата.Я получил его на работу, но закрытие или обновление браузера очищает значение, и клики от разных людей не складываются.Вот что у меня есть: 

<body>
  <div class="main">

    <h3>Click Counter</h3>
    <button id="clickme">Click me: 0</button>

    <h5>Filler Text</h5>

  </div>
  <script>
    var button = document.getElementById("clickme"),
        count = 0;
        
    button.onclick = function() {
      count += 1;
      button.innerHTML = "Click me: " + count;
    };
  </script>
</body>

Это заставляет кнопку подсчитывать при нажатии, но я хочу, чтобы она работала так:

Пользователь # 1 щелкает дважды.Счетчик читает два.

Пользователь # 2 посещает страницу, счетчик уже на двух, пользователь нажимает 3 раза.Счетчик равен 5.

Пользователь # 3 посещает, счетчик по-прежнему равен 5 для них и т. Д.

На данный момент каждый пользователь посещает страницу, и значение начинается с нуля.,Помощь

Ответы [ 3 ]

0 голосов
/ 14 мая 2019

Поскольку у меня есть постоянная форма вашего вопроса, вы хотите сохранить количество кликов пользователя, есть 3 scenerio

  1. Форма посещений пользователя Одиночная машина Одиночный браузер (редкая ситуация) в этом вы можете использовать локальное хранилище
  2. Пользователь посещает форму с несколькими браузерами одного компьютера. В этом случае вы должны сохранить его на стороне сервера.
  3. Пользователь посещает форму с несколькими браузерами одного компьютера. В этом случае вы должны сохранить его на стороне сервера * 1008.*

Оба случая 2,3 одинаковы, вам нужно сохранить их на сервере.

Обычный способ сделать это, поместить счетчик в db и конечную точку REST и вызвать эту конечную точкуна странице загрузите каждую страницу, чтобы получить счетчик с сервера, а также после нажатия кнопки «Обновить» на сервере по аналогичной конечной точке

Предложение обучения: Сторона клиента: AJAX (Jquery), Сторона сервера: REST API, DB (MySql), етсь)

0 голосов
/ 14 мая 2019

В зависимости от ваших потребностей, вы можете использовать localStorage . 

count = localStorage.getItem('count');
count = parseInt(count); // because localstorage stores everything in strings

// First time the value does not exist...
if(count == null) {
  count = 0; 
}

button.onclick = function() {
  count += 1;
  button.innerHTML = "Click me: " + count;
  localstorage.setItem("count", count);
};

Это не решение на стороне сервера.Он также менее надежен, так как может быть очищен пользователем в любое время.

0 голосов
/ 14 мая 2019

JavaScript запускается в браузере и сохраняет все переменные в браузере, поэтому область видимости переменной находится в браузере. Вы можете использовать локальное хранилище, но если все пользователи используют один и тот же браузер, который вам не нужен, поэтому единственный способ сохранить данные - это сохранить данные (данные) на сервере и извлечь данные (данные) при загрузке страницы.

вы можете использовать firebase real-time database, если у вас нет сервера.

Начало работы с базой данных Firebase в реальном времени для Интернета

...