Простейшая работа с cookie?

Question

[Макс Бриллиант]

Всем привет. Подскажите пожалуйста.
Перерыл весь интернет и везде полно мусора. Мне нужна самая простая работа с куки. Что я хочу сделать.
У меня есть простенький сайт и на нем выбор города. Я хочу при выборе города, чтобы менялись номера телефонов и адреса.

Мне бы самый элементарный способ записи человеку по клику на город запись в куки и за счет этих кук использовалось бы условие какое-то аля if, else.

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

document.cookie = 'name=msk';
document.cookie = 'name=spb';

знаю что оно перезаписывает друг друга. К примеру, человек нажал на москву и в куках написалось "msk"
соответственно, он заходит на страницу контакты и там в условиях if выдавались бы нужные ему контакты. Как это самым простым способом реализовать и не писать код на 50 строк?
Спасибо!

Answer 1

[Стас Хитрич]

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

$default_phone = get_theme_mod('phone_default'); 
$moscow_phone = get_theme_mod('phone_moscow');
$spb_phone = get_theme_mod('phone_spb');
$voronezh_phone = get_theme_mod('phone_voronezh');

$user_region = in_array('uLocation', $_COOKIE) ? $_COOKIE['uLocation'] : null;
$active_phone = null;

if ($user_region) {
    if ($user_region === 'Москва' && $moscow_phone) $active_phone = $moscow_phone;
    else if ($user_region === 'Санкт-Петербург' && $spb_phone) $active_phone = $spb_phone;
    else if ($user_region === 'Воронежская' && $voronezh_phone) $active_phone = $voronezh_phone;
    else $active_phone = $default_phone;
} else {
    $active_phone = $default_phone;
}

В плане скрипта который создает куку, у меня пара проверок, по IP была проверка города и установка региона с помощью DDATA, в вашем случае, как я понял, всё проще, но суть такая, записываете куку, но не забывайте о проверках, что она уже установлена, чтобы не грузить лишний раз. В примере ниже просто ставится кука по имени/значению + expires для даты чтобы раз в неделю сбрасывалась. Можете обойтись и без этого. Вот:

const cookieName = 'uLocation';
const addCookie = (cookieVal) => 
   document.cookie = `${cookieName}=${cookieVal.trim()}; expires=${new Date(new Date().getTime() + 3600 * 1000 * 24 * 7).toUTCString()}`;

Comments

[Макс Бриллиант]

Добрый день! Так понимаю, для данного метода мне нужна библиотека куков?
Прост в js (или как я догазываюсь, это не на js а на php реализация) я туговат. Иногда долго приходится ковырять, чтобы чет понять.

[Макс Бриллиант]

Нашел еще такой вариант. Вспомнил, когда-то делал баннера на сайт, чтоб не мешались. По клику закрыть, они не показывались какое-то время. Взял оттуда библиотеку печенек и вот чет такое сейчас выдумал

$.cookie('city1', 'msk');
$.cookie('city2', 'spb');
var object = $.cookie('city1');
var object2 = $.cookie('city2');

Можно реализовать конечно и по другому, типа с 1м "city1" и делая событие, клик по 1 кнопке города, записывается нужный город в куки а уже за счет object = $.cookie('city1'); получаю то, что там висит и уже через if() делаю свою работу. Что думаешь? Я прост предполагаю. Хватит если мозгов на это

[Макс Бриллиант]

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

[Макс Бриллиант]

вопрос в другом появился. Как сделать так, чтоб при переходе на страницы это ни на что не влияло? Он дублирует и выходит, что city: msk и city: spb вместе существуют. т.к. были нажаты на разных страницах. Как можно сделать так, чтоб они на любой странице перезаписывались, но не создавалось в куках 2 разных?

[Стас Хитрич]

Нет, это дефолтный способ работы с куками в JS и никаких библиотек не надо.
У них есть несколько параметров, всё можно в доке к ним найти, включая время жизни.
Про PHP, просто для примера привел как на куки реагировать, просто пара условий и запись в переменную подходящего значения, тоже самое можно и в скрипте реализовать.
Насчет дублирования, я же уточнил, сделайте условие и проверку на уже существующую куку. У меня проверка вот так сделана была:

if (document.cookie.split(';').filter(item => item.includes(cookieName)).length) return;

[Макс Бриллиант]

Стас Хитрич, сложно понять твой код, т.к. я туговат в этом. А не будет это мешать на выбор города? К примеру, человек клацнул на главной 1 город, потом передумал и на другой странице нажал другой город. Выходит что твой скрипт не даст сработать этому? Я так пониял, проблема в том, что патч разный. На скрине выше видно, что 1 раз было нажато на главной, другой на странице корзины. Он записал 2. Можно как-то ограничить? Чтоб вне зависимости от страницы он был только 1 с именем "city"?

[Стас Хитрич]

Я написал небольшой пример, но вообще, вот статья, там есть всё что нужно, методы add, delete, check и параметры. Конкретно насчет всего сайта, а не конкретных страниц, вас интересует параметр path. В любом случае, вот пример, HTML с select и парой городов, а ниже реализация, надеюсь всё понятно будет =)
P.S: Вот тут пример в песочнице, но сайт не разрешает куки записывать, так что, работу его продемонстрировать не получится, но поклацать можете.

<select name="userCity" id="userCity">
    <option value="Москва">Москва</option>
    <option value="Воронеж">Воронеж</option>
    <option value="СПБ">СПБ</option>
  </select>

const cookieName = 'myUserCookie'; // Имя для cookie
const selectEl = document.querySelector('#userCity');  // Селект с выбором городов

  // Получить значение cookie (метод взят из https://learn.javascript.ru/cookie)
const getCookie = (key) => {
   const matches = document.cookie.match(new RegExp(
      "(?:^|; )" + name.replace(/([\.$?*|{}\(\)\[\]\\\/\+^])/g, '\\$1') + "=([^;]*)"
    ));
    return matches ? decodeURIComponent(matches[1]) : undefined;
}

// Установить cookie по ключ/значение на неделю
const setCookie = (name, value) => {
   const toDate = new Date(new Date().getTime() + 3600 * 1000 * 24 * 7).toUTCString(); // 1 неделя вперед
   document.cookie = `${name}=${value.trim()}; path=/; expires=${toDate}`; // Установить cookie на 1 неделю для всего сайта
}

selectEl.addEventListener('change', (event) => {
   const selectVal = event.target.value; // Выбранное значение
   if (getCookie(cookieName) === selectVal) return;  // Сравнение, равно ли выбранное значение значению куки
   else setCookie(cookieName, selectVal);  // Если НЕ равно, то записываем новое
});