Question

我最近创建了一个网站，它使用基本的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 I

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)

Here is an example of using local storage and an example that works! (see below, but you will have to copy and paste the info into notepad) step-by-step example

MDN本地存储指令doe snot在这种情况下有意义：

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代码。

Answer 1

如果要保存的数据必须在站点用户之间共享，那么没有某种类型的服务器端技术就无法实现。最容易学习和设置可能是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的更多信息。

如何在本地html文件meme奖励网页中保留数据以允许计数器永久保留？

1 个答案: