在前端存储公共数据的最佳选择是本地存储。
我对CSS, HTML和JS相当陌生，但我希望创建一个点击计数器，计算所有用户的所有点击。
ie。当计数器显示"0"时;如果用户A打开了网站，点击了一次计数器，用户B也点击了一次计数器，得到了"2"的结果;而不是"1"
我看过很多视频如何创建计数器，但它重置一旦页面重新加载，这不是我想要的。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Counter App</title>
<!-- ---------------- linked css file ----------------- -->
<link rel="stylesheet" href="counter.css">
</head>
<body>
<!-- ----------------html formated --------------- -->
<div class="container">
<main>
<h1>Counter App</h1>
<div class="button-counter">
<button class="btn decreased"> - </button>
<span> 0 </span>
<button class="btn increase"> + </button>
</div>
</main>
</div>
<!-- ---------------- linked js file ---------------- -->
<script src="app.js"></script>
</body>
</html>
// initial value of span ========
let value = 0
// getting value by reference ==========
const span = document.querySelector("span");
const decreased = document.querySelector(".decreased")
const increase = document.querySelector(".increase");
// --------- calling the even function -------------------
decreased.addEventListener("click" , () => {
span.innerHTML=value--;
});
// --------------- event for increase button--------------------
increase.addEventListener("click" , () =>{
span.innerHTML=value++;
})
*{
margin 0%;
padding: 0%;
box-sizing: border-box;
background-color: rgba(255, 166, 0, 0.644);
}
.container
{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: orange;
border: 1px solid orange;
border-radius: 20px;
box-shadow: 5px 5px 4px 2px rgb(211, 161, 96);
width: 300px;
height: 200px;
}
h1{
font-size: 30px;
text-align: center;
text-shadow: 2px 2px rgba(5, 5, 5, 5);
color: white;
}
.button-counter{
display: flex;
justify-content: space-around;
align-items: center;
}
button
{
text-align: center;
padding: 10px;
margin: 10px;
font-size: 30px;
width: 60px;
height: 60px;
border-radius: 50%;
background-color: rgba(255, 166, 0, 0.445);
cursor: pointer;
box-shadow: 5px 5px 5px rgba(255, 166, 0, 0.829);
border: 1px solid rgb(231, 230, 230);
font-weight: bolder;
color: white;
}
button:hover{
background-color: #fff;
color: black;
}
span
{
text-align: center;
box-shadow: 5px 5px 4px 2px rgb(150, 143, 121);
font-size: 32px;
font-weight: bolder;
border-radius: 10px;
width: 50px;
border: 1px solid rgb(90, 89, 89);
color: rgb(36, 17, 33);
}
如果您希望下一个用户从前一个用户中计算剩余的内容，则需要将数据存储在某个地方(例如在数据库中)，并且当页面首先加载时，您将再次读取该值并将其显示给用户。
答案是no如果只使用CSS、HTML和JS，你是无法做到这一点的。
window.localStorage.setItem(name, data); // -> set item
window.localStorage.getItem(name); // -> get item
- 可以使用DevTools 修改
- 在缓存被清空时重置
编辑:您需要一个数据库和一个服务器，以便能够在多个用户和/或客户机之间共享数据