我最近创建了一个网站，使用基本的javascript来制作一个计数器（以及html和CSS来制作图形），现在我想要包含一个允许计数器上升的组件，即使刷新页面也是如此。这是一个很大的项目，允许人们在自由代码营地球facebook组中对模因进行投票，并且会阻止人们随时随地涌入网站 - 这是免费代码Camp Sunday Funnies社区计划的一部分。
目前，刷新页面时，计数器将返回零。
这是至关重要的背景，以便您可以看到我的具体问题与其他问题有多么不同！首先，这是我的代码（再次，您需要做的就是在记事本中发布，我更喜欢可视代码编辑器，因为它是自动编码）：
#Fbanner1 {
position: absolute;
top: 0;
right: 0%
}
#Fbanner2 {
position: absolute;
top: 0;
left: 0%;
}
#banner {
position: absolute;
top: 0%;
left:0%;
}
#hook {
font-family: 'VT323', monospace;
font-size: 30px;
text-align: center;
font-variant: small-caps;
border-style: double solid;
border-color:black;
background-color:blue;
transform: translateX(425px);
}
h1 {
font-family: 'Nova Mono', monospace;
font-size: 50px;
text-align: center;
transform: translateX(-5px);
}
body {
background-color: green;
}
section {
display: flex;
flex-direction: row;
}
#main {
font-family: 'Nova Mono', monospace;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-around;
text-align: center;
position: absolute;
top: 8px;
transform:translateY(45px);
}
</style>
<div id="banner">
<div id="banner-content">
<title>Free Code Camp Sunday Meme Award</title>
<div id="instruct"><h4 id="Hook" >!click to choose the meme of legend!</h4>
</div></div>
</div>
</div>
</head>
<div id="Fbanner2"><p> <img height="100" width="100"
src=".\images\fccLogo.png" alt=""></p> </div>
<div id="Fbanner1"><p> <img height="100" width="100"
src=".\images\fccLogo.png" alt=""></p> </div>
<div id="main-content">
<body>
<div id="main">
<div id="titleF"><h1> Sunday Funnies Meme Award </h1></div>
<section>
<h2> 1st place
<figure>
<img src=".\images\meme1.jpg"
onclick="incrementThumb('1st')" width=200 height=200>
<p id="1st">0</p>
<h2>
<figcaption> Alert: dank meme found! </figcaption>
</figure>
</h2>
<h2> 2nd place
<figure>
<img src=".\images\meme1.jpg"
onclick="incrementThumb('2nd')" width=200 height=200>
<p id="2nd">0</p>
<h2>
<figcaption> Getting warmer.... </figcaption>
</figure>
</h2>
<h2> 3rd place
<figure>
<img src=".\images\meme1.jpg"
onclick="incrementThumb('3rd')" width=200 height=200>
<p id="3rd">0</p>
<h2>
<figcaption> A small ripple effect...
</figcaption>
</figure>
</h2>
</section>
<footer>
<h2> Honorable Mention
<section>
<figure>
<img src=".\images\meme1.jpg"
onclick="incrementThumb('HM1')" width=200 height=200>
<p id="HM1">0</p>
<h2>
<figcaption> Worth an eyebrow raise...
</figcaption>
</figure>
</section>
</h2>
<h2> Hononorable Mention
<section>
<figure>
<img src=".\images\meme1.jpg"
onclick="incrementThumb('HM2')" width=200 height=200>
<p id="HM2">0</p>
<h2>
<figcaption> Worth an eyebrow raise...
</figcaption>
</figure>
</section>
</h2>
</footer>
</div>
<script type="text/javascript">
function incrementThumb(value){
var currentValue =
document.getElementById(value).innerHTML;
//console.log("typeof" + typeof(currentValue));
//console.log("1" + currentValue);
if (currentValue === undefined || currentValue === "NaN"
|| currentValue === '') {
currentValue = 0;
//console.log("0" + currentValue);
}
//console.log("2" + currentValue);
var newValue = parseInt(currentValue) + 1;
//console.log("3" + newValue);
document.getElementById(value).innerHTML= newValue;
localStorage.setItem(newValue);}
function DataSaver ()
</script>
</body> </div></div>
</html>
我已经对不同的方法进行了深入的研究：
how to use local storage"> How to use local storage II
conflicting information on using cookies
这是堆栈溢出中描述的类似方法，但我不知道如何将它应用于涉及计数器的特定情况：Stack overflow research confusing one about cookies in addition (or instead of?) using local storage)
这是一个使用本地存储的示例和一个有效的示例！ （见下文，但你必须将信息复制并粘贴到记事本中）step-by-step example
在这种情况下，MDN本地存储指令没有意义：
MDN
现在你已经有了上面的上下文，这也是如何处理一个计数器变量而不是一堆数字，我认为这是我会做的但我不知道如何设置项目从零开始时将改变未来。以下是Tod Motto一步一步描述的代码：
<textarea class="localstorage"></textarea>
<button class="clear">Clear localStorage</button>
<button class="empty">Empty localStorage</button>
<script>
(function () {
// Grab the textarea
var demo = document.querySelector('.localstorage');
// localStorage feature detect
function supportsLocalStorage() {
return typeof (Storage) !== 'undefined';
}
// Run the detection with inverted expression
if (!supportsLocalStorage()) {
// Change the value to inform the user of no support
demo.value = 'No HTML5 localStorage support, soz.';
} else {
// Try this
try {
// Set the interval and autosave every second
setInterval(function () {
localStorage.setItem('autosave', demo.value);
}, 1000);
} catch (e) {
// If any errors, catch and alert the user
if (e == QUOTA_EXCEEDED_ERR) {
alert('Quota exceeded!');
}
}
// If there is data available
if (localStorage.getItem('autosave')) {
// Retrieve the item
demo.value = localStorage.getItem('autosave');
}
// Clear button, onclick handler
document.querySelector('.clear').onclick = function () {
demo.value = '';
localStorage.removeItem('autosave');
};
// Empty button, onclick handler
document.querySelector('.empty').onclick = function () {
demo.value = '';
localStorage.clear();
};
}
})();
</script>
如果你想看到问题解释的简要版本，请跳到这里
我知道我需要设置并获取信息，我认为这个信息将是计数器，但是
答：我不知道是否可以（如果我还需要使用cookies）;网上有关于不同方法的综合评论......
B.如果我需要使用WAMP（我不会问如何使用WAMP，就好像我做...基于我的研究，似乎这不是必要的）
C.如果我可以用计数器做这个（也许我不能......在那种情况下，任何与流行的meme网站合作的人可能也想知道不试图这样做）
D.同样重要的是，我在这样的情况下用计数器设置了什么（我试图通过做项目来建立我的技能基础，所以我可以减少你的时间。
我自己的例子是这样的：
localstorage.setitem(0, ++)
（我假设这是因为你每次都要添加一个值。所以这是一个脱离上下文但希望可以插入上面的Tod Mottos代码中。
如果您要保存的数据必须在站点用户之间共享，那么没有某种类型的服务器端技术就无法实现。最容易学习和设置可能是PHP（虽然我不喜欢它）。还有其他选择，但设置和学习语言可能很难。
如果计数器数据对每个用户都是唯一的，您可以使用cookie或localstorage，但用户很容易被篡改。 Cookie数据更易于设置和获取，可以使用以下代码轻松完成：
function setCookie(cname, cvalue, exdays) {
var d = new Date();
d.setTime(d.getTime() + (exdays*24*60*60*1000));
var expires = "expires="+ d.toUTCString();
document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}
function getCookie(cname) {
var name = cname + "=";
var decodedCookie = decodeURIComponent(document.cookie);
var ca = decodedCookie.split(';');
for(var i = 0; i <ca.length; i++) {
var c = ca[i];
while (c.charAt(0) == ' ') {
c = c.substring(1);
}
if (c.indexOf(name) == 0) {
return c.substring(name.length, c.length);
}
}
return "";
}
上面的代码来自here，您可以在其中了解有关cookie的更多信息。