活动或非活动的大拇指按钮中的本地存储

Question

I have my like button but I don't know how to use javascript local storage so that when you refresh the page the buttons don't change我有我喜欢的按钮，但我不知道如何使用 javascript 本地存储，以便在刷新页面时按钮不会改变

the buttons work correctly so that when you click them it turns to thumbs up or down这些按钮可以正常工作，因此当您单击它们时，它会变成竖起或向下的拇指

 function myFunction(x) { x.classList.toggle("fa-thumbs-down"); }

 .fa { font-size: 50px; cursor: pointer; user-select: none; color: red; }.fa:hover { color: rgb(12, 139, 0); }

 <:DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"/> <link rel="stylesheet" href="https.//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> </head> <body> <i onclick="myFunction(this)" class="fa fa-thumbs-up"></i> <i onclick="myFunction(this)" class="fa fa-thumbs-up"></i> <i onclick="myFunction(this)" class="fa fa-thumbs-up"></i> <i onclick="myFunction(this)" class="fa fa-thumbs-up"></i> <i onclick="myFunction(this)" class="fa fa-thumbs-up"></i>

Answer 1

 const isToggled = localStorage.getItem('is-toggled') === 'true' document.querySelectorAll('i').forEach(e => { e.classList.toggle("fa-thumbs-down", isToggled); }) function myFunction(x) { const hasClass = x.classList.contains('fa-thumbs-down') x.classList.toggle("fa-thumbs-down", hasClass); localStorage.setItem('is-toggled', hasClass) }

 .fa { font-size: 50px; cursor: pointer; user-select: none; color: red; }.fa:hover { color: rgb(12, 139, 0); }

 <:DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <link rel="stylesheet" href="https.//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> </head> <body> <i onclick="myFunction(this)" class="fa fa-thumbs-up"></i> <i onclick="myFunction(this)" class="fa fa-thumbs-up"></i> <i onclick="myFunction(this)" class="fa fa-thumbs-up"></i> <i onclick="myFunction(this)" class="fa fa-thumbs-up"></i> <i onclick="myFunction(this)" class="fa fa-thumbs-up"></i>

Answer 2

I would delegate我会委托

I also assume you want all the thumbs to toggle that are to the left of the clicked thumb?我还假设您希望所有拇指都切换到单击的拇指左侧？

Note that StackSnippets do not allow localStorage so I commented the code out.请注意，StackSnippets 不允许 localStorage，因此我将代码注释掉了。 Just uncomment and remove the very first line on your server只需取消注释并删除服务器上的第一行

 const localStorage = `[1,1,1,0,0]`; // remove on own server // const localStorage = localStorage.getItem("thumbs"); // uncomment on own server let thumbValue = JSON.parse(localStorage || `[]`); // get or create the array const container = document.getElementById("thumbs"); const thumbs = [...container.querySelectorAll(".fa")]; thumbs.forEach((thumb, i) => { thumb.dataset.idx = i thumb.classList.toggle("fa-thumbs-down", thumbValue[i]); // set the thumbs }) container.addEventListener("click", e => { const tgt = e.target; const idx = +tgt.dataset.idx; const up = tgt.classList.contains("fa-thumbs-up") const down = tgt.classList.contains("fa-thumbs-down") thumbValue = thumbs.map((thumb, i) => { if (i <= idx) { thumb.classList.toggle("fa-thumbs-down",up) thumb.classList.toggle("fa-thumbs-up",down) } return thumb.classList.contains("fa-thumbs-up") }) console.log(thumbValue) // localStorage.setItem("thumbs",JSON.stringify(thumbValue)); // uncomment on your server })

 .fa { font-size: 50px; cursor: pointer; user-select: none; color: red; }.fa:hover { color: rgb(12, 139, 0); }

 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <div id="thumbs"> <i class="fa fa-thumbs-up"></i> <i class="fa fa-thumbs-up"></i> <i class="fa fa-thumbs-up"></i> <i class="fa fa-thumbs-up"></i> <i class="fa fa-thumbs-up"></i> </div>

活动或非活动的大拇指按钮中的本地存储

问题描述

2 个解决方案

解决方案1
0 2022-08-07 18:59:34

解决方案2
0 2022-08-07 19:24:59

活动或非活动的大拇指按钮中的本地存储

问题描述

2 个解决方案

解决方案1 0 2022-08-07 18:59:34

解决方案2 0 2022-08-07 19:24:59

解决方案1
0 2022-08-07 18:59:34

解决方案2
0 2022-08-07 19:24:59