jquery - 即使在网站刷新后如何检查跨度是否有值(value)

Question

您好，请问是否可以在整个网站刷新后维护功能的更改。到目前为止，我找到了一个用于更改具有值的跨度的背景颜色的代码。但是由于它是 onclick，所以随着页面刷新，背景颜色变回原来的颜色。

$('#submit').click(function(){
   $('td span').each(function(index){
       if( $(this).text().length !== 0 ){
          $(this).parent().css('background-color', 'yellow');
       }
   });       
});

JSFIDDLE 1

是否有一种方法可以在页面刷新后保持更改，或者是否有其他方法可以做到这一点？一个监听器或一个检查器，首先检查站点是否具有跨度值。另外，我不想改变 parent 的背景颜色，而是希望改变对面的列。没有值(value)的那个。有可能吗？ Javascript 或 Jquery 都可以。

编辑

嗯，我想我的问题有点不清楚。好吧，我在上面编辑了我的代码。您可以在那里看到包含 2 列的表格。我希望它在页面刷新后保持这种状态。但到目前为止，我一直在修改代码……而且它不再保存颜色了。我认为我一路上犯了一个错误，但我无法弄清楚.. :(

JSFIDDLE 2

更新

好吧，再试一次@trincot 的回答，我有点找到了我要找的东西，但不完全是。它有点长，没有必要突出文本和输入文本。整个盒子应该绘制(paint)而不是突出显示。请引用这个 JSFIDDLE 1 。下面是我修改的。

JSFIDDLE 3

Answer 1

正如 PartyPete25 所建议的，我们可以使用 HTML5 localstorage。

这是工作 JSFiddle

所以这是给你的代码，

    <table border="1px" width="50%">
  <tr>
    <td><span class="bgValue"></span></td>
    <td><span class="bgColor">1</span></td>
  </tr>
  <tr>
    <td><span class="bgValue"></span></td>
    <td><span class="bgColor">5</span></td>
  </tr>
  <tr>
    <td><span class="bgValue"></span></td>
    <td><span class="bgColor">8</span></td>
  </tr>
</table>
<input type="button" value="Try it" />

JS

var tdValue = $('.bgValue');

 var storedBgColor = localStorage.getItem('.bgColor');

 if (storedBgColor) {
   tdValue.parent().css('background-color', storedBgColor);
 } else {
   // set default color
   alert('no color set');

 }


 $('input').click(function() {

   $('td span').each(function(index) {

     if ($(this).text().length !== 0) {
       $(this).parent().css('background-color', 'yellow');
       var bgColor = $('.bgColor');

       localStorage.setItem('.bgColor', 'yellow');


       // When a span with some value is found, alert the index of the row
       alert($(this).closest('tr')[0].rowIndex);

     }

   });
 });