How to save content changes made by javascript

Question

I've a table with some rows and cells. I can edit inner table content using jquery. But how i can save this edits ? my table:

<table border="1" cellspacing="0">
<tr>
    <th>Teams</th>
    <th>Points</th>
</tr>
<tr>
    <td>Arsenal</td>
    <td id="points">35</td>
</tr>
<tr>
    <td>Liverpool</td>
    <td>33</td>
</tr>
<tr>
    <td>Chelsea</td>
    <td>33</td>
</tr>
<tr>
    <td>Man City</td>
    <td>32</td>
</tr>
<tr>
    <td>Everton</td>
    <td>31</td>
</tr>
</table>

my Jquery code:

<script>
    $(document).ready(function () {
    var val = $("#points").text();
    $("#ss").click(function () {
        val++;
        $("#points").text(val);
    })
})
</script>

<button id="ss">Inc</button>

By clicking on button with "ss" id , the value of td with "points" id increases. So how i can save and update this increase to currently file (without refresh page)?

Answer 1

try Html5 Storage jQuery Plugin

If you are using jQuery in your projects and you want to use Local Storage or Session Storage, this is your library. If user's browser doesn't support them it will use cookies instead.

REFERENCE

https://github.com/artberri/jquery-html5storage/

USING AJAX

$(function(){
    var val = $("#points").text();
    $("#ss").click(function () {
        val++;
        $("#points").text(val);
        $.ajax({
            type: "POST",
            url: "some.php",
            data: { points: val }
            })
            .done(function( msg ) {
            alert( "Data Saved: " + msg );
        });
    })
})

some.php

$point = $_POST['points'];
//CODE TO SAVE TO DATABASE GOES HERE

Answer 2

Try this :

To store :

<script>
$(document).ready(function () {
var val = $("#points").text();
$("#ss").click(function () {
    val++;
   window.localStorage.setItem("storedValue", val);
    $("#points").text(val);
})
 })
</script>

To get value :

var value = window.localStorage.getItem("storedValue");