Search code examples
javascripthtmlstore

How to store all HTML input values


I want to store HTML input values somewhere when I click on the "save" button, so when I'll reload page or reload browser they would be same as I left. I don't know how to do it.

HTML Code:

<p>
    <input type="text" id="name1" class="input-class" disabled="true" value="Cigarette" />
    <input type="number" id="input1" class="input-class" value="1" />&nbsp; - Amount
    <input type="number" id="input2" class="input-class" value="1" />&nbsp; <input type="button" value="Sold" onClick="gamokleba()" />
    <br>
    <input type="text" id="name2" class="input-class" disabled="true" value="Winston" />
    <input type="number" id="input11" class="input-class" value="1" />&nbsp; - Amount
    <input type="number" id="input21" class="input-class" value="1" />&nbsp; <input type="button" value="Sold" onClick="gamokleba2()" />

 </p>

 <input type="button" value="Save All Value" onClick="..." />

JavaScript code:

function gamokleba (value) {
    document.getElementById('input1').value = document.getElementById('input1').value - document.getElementById('input2').value;
}


function gamokleba2 (value) {
    document.getElementById('input11').value = document.getElementById('input11').value - document.getElementById('input21').value;
}

Solution

  • You can use localStorage https://developer.mozilla.org/pl/docs/Web/API/Window/localStorage

    After changing value in any input, store it in localStorage and on page load check if there are any values in localStorage. If there are, set them in your inputs.

    Edit: to be clear - it will be stored only on client side, so different users won't see it.