jquery - How can I save html page with changes of jquery?

Question

I have a html page, these are codes:

<script>

$(document).ready(function(){
  $("h4").click(function(){
    $(this).html("read");
  });
});

</script>


{% for data in collecteddata %}
    <div align="center" class="box">{{ data }}</div><h4>unread</h4>
{% endfor %}

For example I click to "unread" and it became "read" but when I refresh page it becomes "read" again. I'm sorry this might be a silly question but how can I save jquery effects on my html page ? Edit:I 'm not working on a server just local, I use jinja and I have no a database. I use just jinja and python.

Answer 1

You must store (persist) the modified data somewhere. Use an AJAX request to the server to mark the message as read (as in your case).

Or you can use localStorage/sessionStorage, known as Web Storage, to store the data in the browser. Be advised that this data can be changed by the user so sensitive information should not be stored in Web Storage.

Another new and exciting thing to look into is IndexedDB, which acts somewhat like a SQL database on the client-side.

Answer 2

Since you want to save the event effects, thus you have to store the data of the event. The storage can be used are:

• Database [Website]
• Browser Database [localstorage]
• Use Cookies

The basic this you have to do is on event save the data either of three and on reload read the data and change the values according to the data stored.

Answer 3

Try HTML5's localStorage method:

$(document).ready(function () {
    $("h4").html(localStorage.read);
    $("h4").click(function () {
        $(this).html("read");
        localStorage.read = 'read';
    });
});

Demo: http://jsfiddle.net/8MGmV/

However there are other ways to achieve this such as databases and using text files stored on the server.

Answer 4

jQuery reloads with the dom every time resetting the variables on reload. You could either save settings to a database if you need to store the data for the long term or you could save the data as a cookie if you need it just for the short term.