会话存储计数器答案

【问题标题】：Session storage counter会话存储计数器
【发布时间】：2016-08-08 19:57:49
【问题描述】：

我想制作一个简单的计数器脚本，它为文本值分配一个数字值（例如好 - 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 个“点”，刷新页面后，计数器将显示“2”，我会点击好 (3 ) 按钮，第二次刷新后计数器应显示“5”。它有点复杂，但我被卡住了。

有什么想法吗？

【问题讨论】：

我想你知道什么是会话存储以及如何使用它。因此，基本上每当您更新要在将来使用的值时，将其保存在会话存储中的某个键上。并且只要你想在浏览器相同的标签上检索它。
您没有在sessionStorage中保存任何内容

标签： javascript html session counter session-storage

【解决方案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();

【讨论】：