0

我正在为 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。我将如何保存/加载所有内容，以便只保存文本中的更改？

4

0 回答 0