좋아요 버튼 클릭 수 올라가기 질문입니다. 채택완료
안녕하세요~ 항상 감사드립니다.
홈페이지의 각 서브페이지마다 하단에 좋아요를 누를 수 있는 코드를 아래처럼 추가해뒀습니다.
실제로 지금 누르면 1씩 추가 되면서 올라갑니다. 근데 문제는 다음날이면 리셋이 되고, 반응형임에도 불구하고 모바일에선 0으로 보이네요. ㅎㅎ......
[원하는구현]
1. 사용자 누구나 들어와서 누를때마다 숫자가 1카운트씩 플러스되면서 올라감
2. pc 와 모바일 모두 동일하게 숫자가 보이길 원함
js는 제가 챗gpt한테 물어봐서 저기까지 한건데.. 계속 물어봐도 반복적인 얘기만 해서 여기에 조언을 얻고자 글을 남깁니다..!!
html
0
이 페이지가 맘에 들었다면
마구마구 눌러주세요!
js
const pageKey = window.location.pathname;
document.addEventListener("DOMContentLoaded", function() {
let count = localStorage.getItem(pageKey);
if (count === null) {
count = 0;
}
document.querySelector(".count_p").textContent = count;
});
document.querySelector(".count_btn").addEventListener("click", function() {
let count = parseInt(document.querySelector(".count_p").textContent);
count += 1;
document.querySelector(".count_p").textContent = count;
localStorage.setItem(pageKey, count);
});
답변 2개
디비에 저장 하지 않으셔서 그렇습니다. 추천 비추천은
이걸 토대로 하셔야 합니다.
지금 위 내용은 집에 저장하지 않고 "나만 보이게" 저장했기 때문에 타인 및 모바일 등에서 보이지 않는 겁니다.
디비에 저장해야 누군가 볼 수 있는거니깐요
$("#good_button, #nogood_button").click(function() {
var $tx;
if(this.id == "good_button")
$tx = $("#bo_v_act_good");
else
$tx = $("#bo_v_act_nogood");
excute_good(this.href, $(this), $tx);
return false;
});
// 이미지 리사이즈
$("#bo_v_atc").viewimageresize();
});
function excute_good(href, $el, $tx)
{
$.post(
href,
{ js: "on" },
function(data) {
if(data.error) {
alert(data.error);
return false;
}
if(data.count) {
$el.find("strong").text(number_format(String(data.count)));
if($tx.attr("id").search("nogood") > -1) {
$tx.text("이 글을 비추천하셨습니다.");
$tx.fadeIn(200).delay(2500).fadeOut(200);
} else {
$tx.text("이 글을 추천하셨습니다.");
$tx.fadeIn(200).delay(2500).fadeOut(200);
}
}
}, "json"
);
}
위 상황을 조금 더 이해를 돕기 위해 ,
제가 질문자님에게 현금 1천원씩 계속 줄려고 버튼을 눌렀더니,
실제로는 줬다고 보여질 뿐 질문자님 계좌에 입금되지 않고 그냥 장난쳐 놓은 것과 같습니다.
은행이라는 곳에 실제로 "입금" 되어야 내 통장 + 출금이 되는 것과 같이
해당 데이터 좋아요 숫자를 어딘가 저장해놔야겠죠?^^
답변에 대한 댓글 1개
댓글을 작성하려면 로그인이 필요합니다.
코드를 보시면
localStorage.setItem(pageKey, count);
웹브라우저의 로컬스토리지에 저장하고 있습니다.
즉, 이건 다음날 리셋되는 문제 이전에
브라우저로 접속하는 사람마다 카운트가 틀려지게 됩니다.
먼저 댓글 주신 분대로 DB 에 저장하시길 바랍니다.
답변에 대한 댓글 1개
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인