Как внести изменения в документ HTML с помощью Javascript?

Question

1. У меня есть простой код счетчика, но внесенные изменения исчезают после обновления страницы.

2. Почему это происходит, должно ли это быть сделано с использованием PHP?

3. Как этот код может быть написан гораздо эффективнее, только для знания в любом случае это не главный вопрос.

---

var like=document.getElementById("like__image"); 
addEventListener("click",function(){ 
    var likeBox=document.getElementById("like__box"); 
    var likeAdd=Number(likeBox.textContent)+1; 
    likeBox.textContent=likeAdd; 
}); 

Answer 1

Javascript перезагружается при перезагрузке страницы, так что это естественно, что изменения будут потеряны, а также.

Вы можете, однако, хранить их постоянно, либо в веб-службе, либо предпочтительно в localStorage. Затем вы можете получить из localStorage при загрузке страницы.

Использование PHP, вероятно, не поможет, не сохранив его где-нибудь.

Я не думаю, что ваш код может быть написан гораздо эффективнее.

Answer 2

Я предлагаю посмотреть на cookies, если вы хотите отслеживать информацию через перезагрузки страниц простым способом. Если вы хотите, чтобы информация была доступна кому-либо, кроме пользователя, создавшего ее, вам, вероятно, потребуется некоторая форма сохранения на стороне сервера, такая как база данных.

Answer 3

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

Для постоянного результата используйте базу данных или если вы не используете базу данных для своего приложения/веб-сайта, вы можете использовать файл (например .txt или .xml), чтобы сохранить свой счет, и в следующий раз, когда вы сможете прочитать из этого файла отобразите его снова. Но обычно рекомендуется использовать базу данных по файловой системе.

Использование файловой системы:

Для основного файла у нас есть небольшой код PHP, чтобы получить существующий как кол и функции Ajax запрашивающего like.php файл, когда пользователь нажимает на кнопку, как.

HTML тела:

<?php 
    $likeFile = 'like.txt'; 
    /* check if the like file exists*/ 
    if(file_exists($likeFile)) { 
     /* read the only the first file of the file as we don't intend to have more */ 
     $file = fopen($likeFile, 'r'); 
     $like = fgets($file); 
     fclose($file); 
     if($like) { 
      /* if we get the line split the string "likes=number" and get the existing count */ 
      $likeCount = end(explode('=', $like)); 
     } 
    } else { 
     $likeCount = 0; 
    } 
?> 
<a href="javascript:void(0)" onclick="like()">Like <span id="count"><?php echo $likeCount ?></span></a> 

Javascript:

<script type="text/javascript"> 
function like(){ 
    $.ajax({ 
     type:"POST", 
     data: {like:true}, 
     url: "like.php", 
     success: function(result){ 
      $('#count').text(result); 
     } 
    }); 
} 
</script> 

В like.php, мы проверяем на пост переменной "как" просто чтобы быть уверенным, что мы не просто увеличиваем например, при прямом доступе к этому файлу. Здесь мы проверяем, существует ли файл like.txt или нет. Если true, он получает первую строку like=1, получает счетчик, увеличивает счетчик и возвращает его обратно в запрос ajax. Если false, он просто создает файл like.txt с like=1 в первый и единственный раз.

<?php 
if(isset($_POST['like']) && $_POST['like'] == true) 
{ 
    $likeFile = 'like.txt'; 
    /* check if the like file exists*/ 
    if(file_exists($likeFile)) { 
     /* read the only the first file of the file as we don't intend to have more */ 
     $file = fopen($likeFile, 'r'); 
     $like = fgets($file); 
     fclose($file); 
     if($like) { 
      /* if we get the line split the string "likes=number" and get the existing count */ 
      $likeCount = end(explode('=', $like)); 
      $likeCount++; /* increment the count by one */ 
      file_put_contents($likeFile, 'likes=' . $likeCount); /* write the new count the same file and save it */ 
      echo $likeCount; /* return the like count to the ajax request */ 
     } 
    } else { 
    /* if file does not exist create it for the first time with count 1 */ 
     file_put_contents($likeFile, 'likes=1'); 
     echo '1'; 
    } 
} else { 
    return 'Something Wrong!'; 
} 

Надеюсь, что это достаточно ясно и полезно для вас.