Как сделать так, что бы при обновлении страницы на ней остались все изменения, сделанные в предыдущей сессии?

Question

[JackShcherbakov]

Например я делаю кликер, и мне надо что бы при обновлении страницы внизу страницы был достигнутый результат в прошлой сессии. Причем надо сделать это именно на JS, такое возможно? Это должно быть что-то типа счетчика, для того, что бы побивать свои же рекорды.

Comments

[gleendo]

В localStorage можете данные сохранять.

[JackShcherbakov]

iamevg_: Посмотрел в интернете, но там в основном чистый JavaScript, как бы это странно ни звучало на чистый JS я пока не знаю, только с jQuery (Все из-за книги), реально ли это реализовать на jQuery?

[gleendo]

JackShcherbakov: Это лучше прекратить сейчас. Так вы ничему не научитесь. Изучайте сначала ванильный JS.

[Денис Богданов]

JackShcherbakov: Да, реально. Просто пишите localStorage.setItem('название_ключа', 'значение_которое_нужно_сохранить');

[Сергей delphinpro]

JackShcherbakov: Как бы странно это не звучало, но jQuery написан на javascript.

Поясняю. jq была написана ради кроссбраузерной совместимости. Это ее главная задача. Попутно она предоставила довольно удобный API для написания плагинов, расширяющих ее возможности, чем и обеспечила себе дикую популярность. Плюс удобный Api для доступ а DOM. Но на этом всё.

пойми - это всего лишь библиотека, написанная на javascript. Крайне глупо "учить" jquery, и не понимать javascript.

[JackShcherbakov]

Сергей: Я прекрасно понимаю что такое jQuery, просто так получилось, что я "нарвался" на такую книгу, в которой учат делать велосиеды на jQuery, вот и мучаюсь, куплю нормальную книгу, когда дочитаю это. В этой книге чистый JS заканчивается на if и else, а до этого переменные и всякие фундоментальные основы. А что под капотом jQuery - я понятия не имею, что очень обидно.

Answer 1

[ThunderCat]

localstorage, cookie.

Answer 2

[gleendo]

Demo (Codepen)

<div class="clicker">
  <button class="prev">-</button>
  <span class="counter"></span>
  <button class="next">+</button>
</div>

const counter = document.querySelector(".counter");

let count = parseInt(localStorage.getItem("count") || 0);

counter.textContent = count;

document.querySelector(".clicker").addEventListener("click", event => {
  if (event.target.closest(".prev")) { 
    localStorage.setItem("count", --count);
    
    counter.textContent = localStorage.getItem("count");
  }
  
  if (event.target.closest(".next")) {  
    localStorage.setItem("count", ++count);
    
    counter.textContent = localStorage.getItem("count");
  }
}, false);

Comments

[JackShcherbakov]

Спасибо огромное за пример!