Javascript 如何在本地存储中保存表格单元格中的背景颜色更改？

我有一段代码，当用户点击时更改td的背景颜色，当用户再次点击时更改为另一种颜色，我试图做的是将更改保存在本地存储中，这样当用户刷新页面时，更改仍然保留。有人知道怎么做吗

以下是JSFIDLE： 看看

是的，您可以使用

本地存储

在中查找示例

您只需要使用

localStorage.setItem（index，class）

存储列和相关类的索引，例如{'1'：'red'，'2'：'yellow'…}，当用户单击时，在onload（内部就绪函数）中，您必须解析每个

td

检查实现的索引是否在

本地存储中，如果是，则通过
localStorage.getItem（）
函数获取类，并使用
addClass（）
函数将其添加到
td
：

JS:

//parse every td onload
$('td').each(function(index){

    //Add class to the current td if his index is already stored in localStorage
    if(localStorage.getItem(index)!=null){
        $(this).addClass(localStorage.getItem(index));
    }
});

$('td').click(function () {
    var cell = $(this),
        state = cell.data('state') || 'first'
        index = $(this).index();

    switch (state) {
        case 'first':
            localStorage.setItem(index, "red");
            cell.addClass('red');
            cell.data('state', 'second');
            break;
        case 'second':
            localStorage.setItem(index, "yellow");
            cell.addClass('yellow');
            cell.data('state', 'third');
            break;
        case 'third':
            localStorage.setItem(index, "");
            cell.removeClass('red yellow');
            cell.data('state', 'first');
            break;
        default:
            break;
    }
});

希望这有帮助。
您可以轻松地使用
localStorage
来完成此操作。更改状态时设置
localStorage
，然后在页面加载时，获取
localStorage
并根据
localStorage
值将每个
td
重置为之前的状态：

给你。另外，我只更改了JavaScript，下面是用于此的JavaScript代码：

//Get all of the tds:
var tds = $("td");
//Loop through all tds:
for (var i = 0; i < tds.length; i++) {
    //Get the previous state of the td:
    var prevState = localStorage.getItem("state"+i);
    console.log(prevState);
    //If prevState is null, set it to "first":
    if (prevState === null) {
        localStorage.setItem("state"+i, "first");
    }
    //Otherwise, restore prevState:
    else {
        //Get the td:
        var cell = $(tds.get(i));
        //Depending on prevState:
        switch (prevState) {
            case "first":
                //Do nothing if it's in the first state because that's the default.
                break;
            case "second":
                //Add the class "red" if it's in the second state:
                cell.addClass("red");
                break;
            case "third":
                //Add the class "yellow" if it's in the third state:
                cell.addClass("yellow");
                break;
            default:
                //If it's something else, set it to "first":
                localStorage.setItem("state"+i, "first");
                prevState = "first";
                break;
        }
        //Set cell's data-state to prevState:
        cell.data("state", prevState);
    }
}

tds.click(function () {
    var cell = $(this),
        state = cell.data('state') || 'first';

    switch (state) {
        case 'first':
            cell.addClass('red');
            cell.data('state', 'second');
            break;
        case 'second':
            cell.addClass('yellow');
            cell.data('state', 'third');
            break;
        case 'third':
            cell.removeClass('red yellow');
            cell.data('state', 'first');
            break;
        default:
            break;
    }

    //Update state:
    state = cell.data("state");
    //Get the index of the td:
    var index = tds.index(cell);
    //Set localStorage using index and state:
    localStorage.setItem("state"+index, state);
});

//获取所有tds：
var tds=$（“td”）；
//循环通过所有tds：
对于（变量i=0；i
您可以单击设置cookie我认为
localStorage
比cookies更好，因为这些数据是用于前端的。您知道如何设置吗？我尝试了getElement，但没有成功JSFIDLE链接对我不起作用。你不需要
数据索引，因为你可以直接使用
$（“td”）.index（）
和
$（“td”）.get（）
。谢谢Zakaria！，虽然在android设备上touchOMG有一个小漏洞，但这一个也能工作！非常感谢你，匈奴！这一款在android设备和计算机上都能完美运行