Счетчик хранения сессии

Question

Я хотел бы создать простой скрипт счетчика, который присваивает значение числа для текстового значения (например, good - 1, medium - 2, excelent - 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». Это немного сложно, но я застрял.

Любая идея?

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