javascript - Can you keep changes made to HTML/CSS with jQuery? -

i keep track of comic book collection online using mass amount of tables. color table cells based on ones have vs. don't have. i'm trying make life easier adding jquery site allow me "click" on cell change color.

what don't know how make change permanent. works fine dandy (and i'm going add more functionality cycle through more colors), when refresh page changes made page lost.

is there way make changes permanent?? adding "save" button perhaps? not sure how achieve this.

simple example of i'm doing:

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script> <script> $(document).ready(function() {     $('td').click(function() {         $(this).css('background-color', '#5f0');     }); }); </script> 

---

<table> <tr> <td>#1</td> <td>comic title</td> <td>collected edition</td> <td>omnibus</td> </tr> </table> 

you can using localstorage or server side storage.

when user makes changes page, store css properties respect identifier field preferrably id. in json format , stringify before storing localstorage.

when page refreshes or loads, in onload event , check localstorage if has data. if it's not null retrieve value using key. let's "personalization". use json.parse() original json object.

now loop through json object , use key id , value css properties. apply changes.

example:

var cssprop = { 'cellid' : { 'color': 'red'}} 

if above json have constructed on click of cells.

localstorage.setitem("personalize", json.stringify(cssprop)); 

now on window.onload()

$(function() {  // in case persisting data in server, make ajax call retrieve data , store in localstorage.    if(localstorage.getitem("personalization") != null) {      var personalize= localstorage.getitem("personalization");      var cssprop = json.parse(personalize);      // can iterage object       // use $("#"+keyofobject).css(// use value of object);   } });