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"/>

所以基本上我想选择中等（2）按钮，它会给出2＆＃34;分数＆＃34;到会话存储，刷新页面后，计数器将显示＆＃34; 2＆＃34;我会点击Good（3）按钮，在第二次刷新后，计数器应显示＆＃34; 5＆＃34;。它有点复杂，但我卡住了。

有什么想法吗？

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();

会话存储计数器

1 个答案: