如何在表格單元格中保存背景色更改在本地存儲中？

Question

我有這段代碼可以在用戶單擊時更改td的背景色，而在用戶再次單擊時更改為另一種顏色，我想做的是將更改保存在本地存儲中，以便在用戶刷新頁面時保留更改。 誰知道怎么做嗎？

這是jsfiddle： 在此處輸入鏈接描述

Answer 1

看看您的小提琴已更新 。

是的，您可以使用Local Storage在HTML5 Local Storage中查找示例。

您只需在用戶單擊時使用localStorage.setItem(index,class)存儲列和相關類的索引，例如{'1'：'red'，'2'：'yellow'...} onload（在ready函數內部），您必須解析每個td檢查已實現的索引是否在Local Storage ，如果是，則通過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;
    }
});

希望這可以幫助。

Answer 2

您可以輕松地使用localStorage來執行此操作。 設置localStorage當您更改狀態，然后在頁面加載時，得到localStorage和重置每個td到他們是如何基於之前關閉localStorage值：

這是我對您的JSFiddle的更新 。 另外，我只更改了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);
});