Question

我使用大量的表格在线跟踪我的漫画集。我根据我所拥有的表格单元格对表格单元格进行着色。我想通过在我的网站上添加一些jQuery来让我的生活变得更轻松，这样我就可以简单地“点击”单元格来改变颜色。

我不知道该怎么办才能做出改变PERMANENT。它可以正常工作（我将添加更多功能以循环更多颜色），但是当我刷新页面时，对页面所做的所有更改都将丢失。

有没有办法让这些变化永久化？也许添加“保存”按钮？不知道如何实现这一目标。

我正在做的简单示例：

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

Answer 1

您可以使用localstorage或服务器端存储来执行此操作。

当用户对页面进行更改时，相对于该字段的标识符存储css属性，优选ID。以JSON格式并在存储到localstorage之前对其进行字符串化。

当页面刷新或加载时，在onload事件中，检查localstorage是否有任何数据。如果它不为null，则使用键检索值。让我们说“个性化”。然后使用JSON.parse（）获取原始JSON对象。

现在遍历json对象并使用键作为ID，将值作为css属性。要应用更改。

示例：

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

如果以上是您在点击单元格时构建的json。

localStorage.setItem("personalize", JSON.stringify(cssprop));

现在在window.onload（）

$(function() {

// In case you are persisting data in the server, make ajax call to retrieve the data and then store it in localstorage.

  if(localStorage.getItem("personalization") != null) {
     var personalize= localStorage.getItem("personalization");
     var cssprop = JSON.parse(personalize);
     // you can iterage the object

     // use $("#"+keyOfObject).css(// use value of object);
  }
});

你能用jQuery保持对HTML / CSS的改变吗？

1 个答案: