如何仅将 ul 项目中的文本保存到本地存储？

如何解决如何仅将 ul 项目中的文本保存到本地存储？

我正在开发适用于 KaiOS（基于 HTML、CSS 和 JS 的操作系统）的健身房追踪器应用程序，并希望能够记录每组锻炼所使用的重量。我认为最好的方法是制作一个 ul 物品并保存整个东西。这将是练习的 html：

<ul class="marklyft">
  <li class="firstTabNav">0</li>
  <li class="firstTabNav">0</li>
  <li class="firstTabNav">0</li>
  <li class="firstTabNav">0</li>
</ul>

现在，我可以使用以下代码保存它：

const marklyft = document.querySelector('.marklyft');
localStorage.setItem('ul',marklyft.innerHTML);

并使用此加载它：

const savedUl = localStorage.getItem('ul');
document.querySelector('.marklyft').innerHTML = savedUl;

到目前为止一切顺利。问题是我使用 css 来设置活动元素和已经记录的项目的样式。对于我已经更改的项目，我使用以下代码更改它们的样式：

listNav[this.verticalNavIndex].style.backgroundColor = "#EBEBE4";
listNav[this.verticalNavIndex].style.color = "#808e95";

我还有一个用于活动项目的 css 代码：

.reps li.focus {
  background-color: #263238;
  text-decoration: underline;
  font-size: 25px;
  font-weight: bolder;
  height: 40px;
  transition-property: font-size;
  transition-duration: 0.2s;
  color: #f9f9f9;
  white-space: Nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

问题是在将 innerHTML 保存到 localStorage 时，我也保存了 CSS 样式。我只想更改文本。我试过只保存innerText，但在尝试加载所有内容时会删除所有HTML和CSS。我将如何保存/加载所有内容，以便仅保存文本中的更改？