当页面使用Javascript刷新时，如何保持对类所做的更改

Question

I have a table of data for the user to look through and make changes. They have the option to delete a row if they want. When they delete a row it sends back to the db what row is to be deleted. For the user the row won't delete right away but it will get a new class 'deleted' that has some styles to let the user know it's being deleted. I also have the page refreshing every 10 minutes and when it refreshes the new added 'deleted' class goes away.

How can I get it that the class will stay on the row when the page refreshes?

Here is the timer function for the timer to know when to refresh the page. I'm using ajax to refresh the page.

        function startClock() {
          // Get the time to stop the effect
          var stopTime = new Date();
          stopTime.setMinutes(stopTime.getMinutes() + 10);
          // Get a reference to the timer so it can be cancelled later
          timer = setInterval(function () {
              // Check to see if the timer should stop
              var currentTime = new Date();
              if (currentTime < stopTime) {
                  triggerDataTable(); //refresh dataTable
                  var randomnumber = Math.floor(Math.random() * 100);
              } else {
                  // Stop the timer
                  clearInterval(timer);
              }
          }, 600000);
      }

Would I use localStorage? If so how would I actually do it? I'm not familiar with storing local values or anything like that.

Answer 1

I'm not 100% sure about this but what about doing something like this:

var deletedRow = $(".deleted");
localStorage.setItem( deletedRow, $(".deleted").val() );

Answer 2

try using sessionstorage over localstorage

Session Storage property maintains a separate storage area for each given origin and for a session .

Local Storage does the same thing, but persists even when the browser is closed and reopened.

sessionStorage.setItem('item', value);
sessionStorage.getItem('item');