Как использовать Cookies в Javascript для записи количества посещений пользователей?

Question

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

<section class="stage">
      <figure class="artImage" id="artImageId"><span class="shadow"></span></figure>
    <p>Test</p>
    <script>
        var color = "blue";
         if (Math.random() < 0.5) {
             color = "green";
         }
        document.getElementById("artImageId").style.background = color;
    </script>

И я уверен, что мне нужно использовать что-то вроде следующего, но я нахожу это очень трудным. Некоторые образцы или советы будут отличной помощью! Я хотел бы услышать от вас!

var $cookies = document.cookie.split(';');

Answer 1

Не изобретайте колесо , используйте небольшую кросс-браузерную библиотеку, такую ​​как cook ie. js, чтобы читать / писать / удалять куки.

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

Вот полный фрагмент JSFiddle , чтобы вы могли понять, как он работает, и увидеть, что его проще использовать, чем манипулировать файлами cookie без использования сторонней библиотеки.

Каждый раз, когда вы запускаете или нажимаете кнопку Bootstrap, загружается случайное изображение (оно может быть одним и тем же), и сколько раз оно видимый увеличивается.

Используйте F12 для просмотра консоли браузера и отображения информации.

Вы можете просмотреть ключи и значения localStorage на вкладке Приложение / Локальное хранилище Инструменты разработчика ( F12 в Chrome и Firefox).

Answer 2

Поскольку куки могут работать как простые строки, я бы порекомендовал вам сделать что-то следующее; Во-первых, когда пользователь посещает веб-сайт и видит определенное изображение, скажем, «зеленое», вы сохраняете в поваре следующее: ie:

document.cookie = "image=green;visited=1;

И всегда проверяете повара ie перед повторной установкой, выполнив следующие действия:

var cookie = document.cookie;
If(cookie!= null && cookie!=undefined){
If(cookie.length>0){
var imageSeen = cookie.split(";")[0].split("=")[1];
var seenCount= parseInt(cookie.split(";")[1].split("=")[1]);

//Not first time visit!!
seenCount++;

ImageToShow= imageSeen;//just do wtv u need to to show the imageSeen

//Then save the cookie again

document.cookie = "image=green;visited="+seenCount+";";


}}else{
//Treat as first time visit
document.cookie = "image=green;visited=1;";
}

Надеюсь, эта помощь!