Jquery 如何在网站刷新后检查span是否有价值

嗨，我想问一下，在整个网站刷新后，是否有可能维护功能的更改。到目前为止，我发现了一个代码，用于更改具有值的跨度的背景颜色。但是，由于是onclick，因此当页面刷新时，背景颜色会变回原始颜色

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

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

编辑

嗯，我想我的问题有点不清楚。我编辑了上面的代码。你可以看到有两列的表格。我希望在页面刷新后保持这种方式。但到目前为止，我一直在修改代码。。它不再保存颜色了。我认为我在这一过程中犯了一个错误，但我想不出来(

更新

好的，再试试@trincot的答案，我找到了我想要的东西，但还不完全找到。它有点长，没有必要突出显示文本和输入文本。整个框应该画成不突出显示。请参考此。下面是我修改的

---

您需要使用其中一种

a） HTML5本地存储-或

b） JavaScript cookies-

HTML存储示例：

$('#button').click(function(){
   // update on click
   $('body').css('background-color', 'yellow');

  // set local stoarge to true so that it'll work after a refresh
  if (!localStorage.clicked) {
    localStorage.clicked = true;
  }

});

// check on document ready
$(function(){
if (localStorage.clicked) {
  $('body').css('background-color', 'yellow');
}
});

---

你需要使用任何一个

a） HTML5本地存储-或

b） JavaScript cookies-

HTML存储示例：

$('#button').click(function(){
   // update on click
   $('body').css('background-color', 'yellow');

  // set local stoarge to true so that it'll work after a refresh
  if (!localStorage.clicked) {
    localStorage.clicked = true;
  }

});

// check on document ready
$(function(){
if (localStorage.clicked) {
  $('body').css('background-color', 'yellow');
}
});

---

正如PartyPete25所建议的，我们可以使用HTML5本地存储

这是工作

这是你的密码

    <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" />

---

正如PartyPete25所建议的，我们可以使用HTML5本地存储

这是工作

这是你的密码

    <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" />

---

以下是一些建议代码：

function highlightTexts() {
   var texts = [];
   $('td span').each(function(index){
       texts.push($(this).text());
       if( $(this).text().length !== 0 ){
          $(this).parent().css('background-color', 'yellow');
       }
   });
   var json = JSON.stringify(texts);
   sessionStorage.setItem('span-texts', json);
   // Cancel the form submission. Maybe you don't need this
   return false; 
}

$('#submit').click(highlightTexts);

$(function() {
   var json = sessionStorage.getItem('span-texts');
   if (json) {
       var texts = JSON.parse(json);
       $('td span').each(function(index){
           $(this).text(texts[index]);
       });
       highlightTexts();
   }
});

---

下面是一个示例，演示如何保存刷新或再次访问同一页面时再次加载的文本。然后使用提交时使用的相同算法再次突出显示文本。

以下是一些建议代码：

function highlightTexts() {
   var texts = [];
   $('td span').each(function(index){
       texts.push($(this).text());
       if( $(this).text().length !== 0 ){
          $(this).parent().css('background-color', 'yellow');
       }
   });
   var json = JSON.stringify(texts);
   sessionStorage.setItem('span-texts', json);
   // Cancel the form submission. Maybe you don't need this
   return false; 
}

$('#submit').click(highlightTexts);

$(function() {
   var json = sessionStorage.getItem('span-texts');
   if (json) {
       var texts = JSON.parse(json);
       $('td span').each(function(index){
           $(this).text(texts[index]);
       });
       highlightTexts();
   }
});

---

---

下面是一个示例，演示如何保存刷新或再次访问同一页面时再次加载的文本。然后使用提交时使用的相同算法再次突出显示文本。

使用LocalStorage查看@SatejS我已经签出了本地存储，但是为了将值保存到本地存储，您必须首先输入值。我遇到的是一个验证错误。只有在确认输入错误且css也将更改后，错误才会出现。我尝试了类似@SatejS的方法，但所有内容都被涂成黄色。x、 我只想用值来绘制td。请使用LocalStorage进行查看@SatejS我已经签出了本地存储，但是为了将值保存到本地存储，您必须首先输入值。我遇到的是一个验证错误。只有在确认输入错误且css也将更改后，错误才会出现。我尝试了类似@SatejS的方法，但所有内容都被涂成黄色。x、 我只想用价值来描绘td。谢谢你的回答。我将根据我的网站尝试使用它。：）谢谢你的回答。我将根据我的网站尝试使用它。：）哦，酷！但是如果我想用文本给跨度的相反方向着色，我明白了。非常感谢你！我有一个有点相同的代码，但我输了一半。xDI不知道为什么，但当我把它放在我的网站上时，它不起作用（您是否在脚本中添加了JQuery…“控制台错误”是什么？是的，我添加了。它以前工作过，但它不正确。我想我做错了什么。我正在尝试找出。x.xOh很酷！但是如果我想用文本为跨度的相反部分着色，我明白了。非常感谢！我有一段代码，但我输了一半。xDI不知道为什么，但我当我把它放在我的网站上时，它不起作用..：（您是否在脚本中添加了JQuery…“控制台错误”是什么？是的，我添加了。它以前工作过，但不正确。我想我做错了什么。我正在尝试找出答案。x.x谢谢您的回答，但这不是我想要的。：d您是否愿意解释一下这个答案中缺少的内容？我是否误解了您的问题？这段代码成功地检查了页面刷新时span是否有值，就像我想你问的那样。嗨~我更新了我的问题，请检查一下。非常感谢！你的代码很有帮助。span中的文本是如何更改的？由用户更改的？如果是静态的，那么为什么需要保存突出显示？如果是生成的，为什么不应用当时的突出显示？它是静态的，但一旦单击按钮，跨距显示出来，左栏应该被绘制。我需要保存它，因为当单击按钮时，整个页面刷新，我绘制的绘画被重置。谢谢你的回答，但这不是我要找的。：d你想解释一下吗A你在这个答案中遗漏了什么？我误解了你的问题吗？这段代码成功地检查了页面刷新时span是否有值，就像我想你问的那样。嗨~我更新了我的问题，请检查一下。非常感谢！你的代码很有帮助。span中的文本是如何更改的？由用户更改的？如果是静态的，那么为什么d您需要保存高光？如果已生成高光，为什么不在此时应用高光？它是静态的，但一旦单击按钮，跨距显示，应绘制左列。我需要保存它，因为当单击按钮时，整个页面将刷新，并且我已绘制的绘制将重置。