会话存储计数器

Question

我想制作一个简单的计数器脚本，为文本值分配一个数字值（例如好 - 1，中等 - 2，优秀 - 3），然后我想将该值存储在会话中存储和页面重新加载后，我想从以前的结果值继续计数。

我有计数器脚本和 HTML 但我无法恢复以前的值并继续计数。这是脚本：

function modify_qty(val) {
    var qty = document.getElementById('qty').value;
    var new_qty = parseInt(qty,10) + val;

    if (new_qty < 0) {
        new_qty = 0; document.getElementById('qty').value = new_qty;
        document.getElementById("result").value = sessionStorage.getItem("qty");
        document.getElementById("result").innerHTML = sessionStorage.getItem("qty");
    }

    document.getElementById('qty').value = new_qty;
    return new_qty; 
}

我使用以下 html:

    <table id="main">

            <tr>
                <td><button id="up" onclick="modify_qty(1)">Poor</button> </td>
                <td><button id="up" onclick="modify_qty(2)">Moderate</button></td> 
                <td><button id="up" onclick="modify_qty(3)">Good</button></td>
                <td><button value="Refresh Page" onClick="  sessionStorage.qty = qty.value; window.location.reload();">Reload</button></td>
                <td><button value="Clear" onClick="sessionStorage.clear (result);window.location.reload();">Clear</button></td>
            </tr>
        </table>
    </div><br><br><br><br><br><br><br>

        <div class="box">    
                <input id="qty" type="text" value="0" />
                <input id="result" value="0"/>

所以基本上我想 Select 中等 (2) 按钮它会给会话存储 2 "points"，刷新页面后，计数器将显示“2”然后我会点击 Good (3) 按钮，在第二次刷新后，计数器应该显示“5”。它有点复杂，但我被卡住了。

有什么想法吗？

Answer 1

出于某种原因，通过 Stack Overflow 的代码片段发布它时出现脚本错误，所以我使用了 JSFiddle。

https://jsfiddle.net/kqexbhmo/

<div class="container">
  <h3>Example</h3>

  <div data-score="1">good</div>
  <div data-score="2">moderate</div>
  <div data-score="3">excellent</div>
  <div id="reset">reset</div>
  <div id="score"></div>
</div>



var votes = document.querySelectorAll('[data-score]');
for (var ix = 0; ix < votes.length; ix++) {
  votes.item(ix).addEventListener('click', function() {
    localStorage.setItem('score', getScore() + parseInt(this.dataset.score, 10));
    showScore();
  });
}

document.getElementById('reset').addEventListener('click', function() {
  localStorage.removeItem('score');
  showScore();
});

function getScore() {
  return parseInt(localStorage.getItem('score') || 0, 10);
}

function showScore() {
  document.getElementById('score').innerText = getScore();
}

showScore();

会话存储计数器

Session storage counter

html

javascript

session

counter

session-storage