Bienvenido a la comunidad StackOverflow.
Con respecto a tu pregunta es posible realizarlo a través de cookies (aunque estás son de forma temporal y cuando se borre el caché sucedería lo mismo que planteas)
Puedes usar las siguientes funciones:
function setCookie(name,value,days) {
var expires = "";
if (days) {
var date = new Date();
date.setTime(date.getTime() + (days*24*60*60*1000));
expires = "; expires=" + date.toUTCString();
}
document.cookie = name + "=" + (value || "") + expires + "; path=/";
}
function getCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for(var i=0;i < ca.length;i++) {
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1,c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
}
return null;
}
Y la parte que detecta el clic del usuario quedaría de la siguiente manera:
$(document).ready(function () {
if(getCookie('color') == null)
{
$(this).css('background', 'white');
}
else
{
$(this).css('background', getCookie('color'));
}
$('td').click(function () {
if(this.style.background == "" || this.style.background =="white") {
$(this).css('background', 'green');
setCookie('color','green',30); //Establecemos la cookie por 30 días
}
/*else {
$(this).css('background', 'white');
}*/
});
});
Referencias: Set cookie and get cookie with JavaScript
Al final tu script debería quedar de la siguiente forma:
<script>
function setCookie(name,value,days) {
var expires = "";
if (days) {
var date = new Date();
date.setTime(date.getTime() + (days*24*60*60*1000));
expires = "; expires=" + date.toUTCString();
}
document.cookie = name + "=" + (value || "") + expires + "; path=/";
}
function getCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for(var i=0;i < ca.length;i++) {
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1,c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
}
return null;
}
$(document).ready(function () {
if(getCookie('color') == null)
{
$(this).css('background', 'white');
}
else
{
$(this).css('background', getCookie('color'));
}
$('td').click(function () {
if(this.style.background == "" || this.style.background =="white") {
$(this).css('background', 'green');
setCookie('color','green',30); //Establecemos la cookie por 30 días
}
/*else {
$(this).css('background', 'white');
}*/
});
});
</script>