Как сохранить «лайки» в localStorage?

Question

[yuriytkachenko]

У меня очень простенький код, по нажатию на кнопку справа от кнопки число увеличивется на 1.Тоесть по сути имитация лайков.
Но конечно если перезагрузить страницу "лайки" пропадают. Как вариант можно сохранить в localStorage. К сожалению не очень хорошо знаю localStorage, пробовал сохранить но все равно при перезагрузке страницы все пропадает...
Подкскажите что нужно изменить или добавить чтобы лайки сохранялись.
Html:

<button class="like" onclick="plusOne()">like</button>
<div id="root"></div>

JS:

let likes = 1;
let plusOne = () => {
  document.querySelector("#root").innerHTML=likes;
  likes++;
  localStorage.setItem("likes", JSON.stringify(likes));  
}

CSS:

.like {
    float:left;
}

Answer 1

[Алексей Ярков]

Это будет работать только для одного устройства

Comments

[yuriytkachenko]

я понимаю, но все равно у меня есть такая задача

[Алексей Ярков]

const printLikes = (likes) => {
  document.querySelector("#root").innerHTML=likes;
}

let likes = +localStorage.getItem("likes") || 0;
printLikes(likes);

const plusOne = () => {
  likes++;
  printLikes(likes);
  localStorage.setItem("likes", likes);  
}

https://jsfiddle.net/5nh106fq/

[yuriytkachenko]

Алексей Ярков, спасибо большое!) а для чего "+" перед localStorage?
И как сделать чтобы изначально 0 не было, а сразу единица появилась после первого клика по кнопке?

Answer 2

[Сергей Соколов]

localStorage это простое хранилище в вашем браузере.
Туда можно положить текст setItem(), или вытащить getItem(), если есть — всё тот же текст.

С «лайками» алгоритм такой:

1. загружается страница;
   
2. смотрим, есть ли сохранённые в LS лайки – если есть показываем их;
   
3. при каждом обновлении счётчика лайков, записываем в LS.
   

spoiler

const KEY = 'my-likes';
let likes = 0; // по умолчанию
if (localStorage.hasOwnProperty(KEY)) likes = +localStorage.getItem(KEY);
const showLikes = n => document.querySelector("#root").innerText = n;
showLikes(likes);
let plusOne = () => {
  likes++;
  localStorage.setItem(KEY, likes);  
  showLikes(likes);
}

Comments

[yuriytkachenko]

спасибо большое!) а для чего "+" перед localStorage?

[Сергей Соколов]

yuriytkachenko, localStorage умеет хранить только текст. А в likes нужно число. Поставить + это один из способов привести строку к числу.

[Сергей Соколов]

let a = "123";

a   //  "123"
​+a  //  123

Answer 3

[profesor08]

У тебя это просто цифра. JSON.stringify не нужен для простых типов.

localStorage.setItem("likes", likes); // записать
Number(localStorage.getItem("likes")); // прочитать и привести строку к числу

Comments

[yuriytkachenko]

прописал то что вы написали, к сожалению не работает, все равно после перезагрузки все пропадает(
может я вас не так понял?:

let likes = 1;
let plusOne = () => {
  document.querySelector("#root").innerHTML=likes;
  likes++;
  localStorage.setItem("likes", likes); // записать
  Number(localStorage.getItem("likes")); // прочитать и привести строку к числу
}

[profesor08]

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

[Вазген Алексанян]

И пожалуйста доставай #root лишь один раз а не каждый раз при клике.