Возможно ли сохранить изменения элементов на сайте с помощью JS?

Question

[exdude]

С помощью js производится изменения сайта по клику, от json файла в которую я забил всю нужную динамичную информацию.
Есть задача сохранить, или же передать этот же клик на другую страницу, с измененными элементами.

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

Есть ли возможность решить данную задачку без бэка? И какими инструментами это сделать?
Может быть есть какие то костыли?
Стоит ли ради этого уже на моем уровне перекатываться на Node.js что бы как можно скорее решить данную задачу?
Рассматривал вариант с бд, и вывод запросом в формате jsone, но опять же сохранить этот запрос не знаю как.

Comments

[Артур]

Сохранять нужные состояния можно в localstorage

[exdude]

Артур, Спасибо, именно то что нужно!

Answer 1

[Robur]

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

например у вас есть кнопка "показать данные", если на нее кликнуть то загружается json и показывается.
при клике вы делаете это все и при этом сохраняете в localStorage "showJson=true"
при загрузке страницы вы смотрите, если showJson=true, то тут же делаете все то что делаете по клику, не дожидаясь пока польователь нажмет кнопку. Как будто он ее сразу же нажал.

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

Comments

[exdude]

Спасибо, localStorage именно то что мне и нужно было!

Answer 2

[Арсений Матыцин]

А, о, я даже кажется по комментариям понял, что тебе надо. Стоит поработать над формулировками вопросов. Тем не менее:

let data = // JSON data → object
let dom_elem = document.getElementByQuery('somelem');
dom_elem.style.display = localStorage.getItem('domElemShow') ? localStorage.getItem('domElemShow') : data.domElemShow;
// Тернарник, который позволит загнать фолбэк при первичной отрисовке чего-либо на странице.

А дальше уже по событиям гонять данные в sessionStorage\localStorage\Cookies\IndexedDB.

Но это работает очень на поверхностном уровне, т.е. если тебе надо сочетать, скажем, пользователя и его данные, то потребуется бэк + DB + localStorage\Кукисы.

Comments

[exdude]

Спасибо!
По сути мне вполне достаточно localStorage.
Но подвох состоит в том что параллельно у меня работает геолокация от которой меняется контент страницы.
Допустим, определилась Москва, я проверяю есть ли у меня в объекте этот город. Если есть подставляю соответствующий контент. Так же параллельно генерирую список городов (для выбора в ручную), в соответствии с вышеупомянутом объектом.
Тут то и возникает проблема, с тем что бы отключить/включить геолокацию при не необходимости.

Логика такая:
Определился город, контент изменился в соответствии с городом. Клиент решает верный город или нет. Если клиент считает все верным, то и геолокация должна продолжать работать.
Если все же нет, то он выбирает город вручную. В этом случае я записываю выбранный город в память, и в последствии прогоняю его в том же цикле что бы вывести весь контент в соответствии с выбранным городом.

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

Пытался решить тем что создал ключ в памяти со значениями true и false, что бы при выборе города в ручную включать/отключать геолокацию, но опять же проблема с тем что скрипт обновляется, и значение ключа перезаписывается.

[exdude]

Разобрался, просто проверяю записан ли город в память, если нет то запускаю скрипт, если да то не запускаю)