Add css .selected class name back to html table with localstorage when page is auto refreshed

Question

I have confirmed that localstorage is storing the row id with

sessionStorage.setItem(rowId, 'true');

I am trying to re-apply the css .selected class name back to the row id when the page is refreshed with

Main purpose is to keep the selected row highlighted when page is reloaded

if (localStorage.getItem('1') === 'true' || localStorage.getItem('2') === 'true') {
                                             
}

.selected {
        box-shadow: inset 0px 0px 10px #FF0000;
        border: 2px solid rgba(255,255,255,.5);
}

-- Java function that highlights the table row when clicked and stores the row id with sessionStorage.setItem(rowId, 'true');

 <script type="text/javascript">
highlight_row();
function highlight_row() {

    var table = document.getElementById('display-table');
    var cells = table.getElementsByTagName('td');

    for (var i = 0; i < cells.length; i++) {
        // Take each cell
        var cell = cells[i];
        // do something on onclick event for cell
        cell.onclick = function () {
            // Get the row id where the cell exists
            var rowId = this.parentNode.rowIndex;
            var rowsNotSelected = table.getElementsByTagName('tr');
            for (var row = 0; row < rowsNotSelected.length; row++) {
                rowsNotSelected[row].style.backgroundColor = "";
                rowsNotSelected[row].classList.remove('selected');
            }
            var rowSelected = table.getElementsByTagName('tr')[rowId];
            rowSelected.style.backgroundColor = "yellow";
            rowSelected.className += " selected";
    
            sessionStorage.setItem(rowId, 'true');
            //alert(rowId);   
            
        }
    }

}
</script>

Have a look at https://stackoverflow.com/questions/2694640/find-an-element-in-dom-based-on-an-attribute-value — Uwe, Dec 28 '22 at 01:59
You are setting `sessionStorage` so you have to get the value from the sessionStorage but you try to get the value from localStorage. See [MDN examples](https://developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage) - Right under the examples is a section "Saving text between refreshes" which should be similar to your question. — Uwe, Dec 28 '22 at 02:09
@Uwe I was testing between both, but I am using sessionstorage as the solution. I do understand the "Saving text between refreshes" with sessionstorage I have that part working with a text field, but how to re-apply -----> var rowSelected = table.getElementsByTagName('tr')[rowId]; rowSelected.style.backgroundColor = "yellow"; rowSelected.className += " selected"; — L1some, Dec 28 '22 at 15:58
@ L1some please share your html markup of your table where you want to set the class. — Uwe, Dec 28 '22 at 20:09

Uwe · Accepted Answer · 2022-12-29T02:44:03.260

I recommend to replace this line

// that would add multiple entries per click on different rows 
// eg: 1: true, 3: true, 47: true
sessionStorage.setItem(rowId, "true");

with

sessionStorage.setItem('rowId', rowId);

That will overwrite the value for last clicked rowId and you don't have to check for all possible rows / key value pairs.

To set the classes use the code you already wrote in your click handler. Put that block after your for loop.

// your for loop
for (var i = 0; i < cells.length; i++) { 
   ...
}

// new code
// check if rowId key exist
// if rowId does not exist null is returned - so we can check for that

if ( sessionStorage.getItem('rowId') !== null ) {
      rowSelected = table.getElementsByTagName('tr')[sessionStorage.getItem('rowId')];
      rowSelected.style.backgroundColor = "yellow";
      rowSelected.className += " selected";
}

that worked className is being applied after page reload, thank you so much for helping with this. — L1some, Dec 29 '22 at 02:51

Add css .selected class name back to html table with localstorage when page is auto refreshed

-- Java function that highlights the table row when clicked and stores the row id with sessionStorage.setItem(rowId, 'true');

1 Answers1