Question

所以我有一个使用HTML创建的主页。我通过打开HTML文件将其从计算机上运行。我正在尝试添加一项功能，允许我从页面（使用//for plugin buildscript { repositories { maven { url "http://repo.spring.io/libs-milestone" } maven { url "http://repo.spring.io/libs-snapshot" } mavenLocal() } ... //for project repositories { mavenLocal() //added missing snapshot repository maven { url "http://repo.spring.io/snapshot" } maven { url "http://repo.spring.io/milestone" } mavenCentral() maven { url "http://repo.spring.io/libs-milestone" } }或content-editable）编辑它，而不是源代码。为实现这一目标，我想出了使用append来保存网页的更新版本，并从该更新版本加载页面。见here。（从理论上讲，我会定期更新localStorage版本的源代码，以便全部匹配。）

然而，当我尝试它时，我的页面将不会更新。我有一个版本保存到localStorage，但似乎该程序无法覆盖该版本或类似的东西。

我的HTML看起来像这样：

localStorage

我的JavaScript看起来像这样：

<!DOCTYPE html>
<html>

<head>
<title>SCSS | Projects</title>
<link type="text/css" rel="stylesheet" href="home page heading style.css">
<link type="text/css" rel="stylesheet" href="home page projects style.css">
<script type="text/javascript" src="save script.js"></script>
<script type="text/javascript" src="jquery.js"></script>
</head>


<body onload="checkEdits()">
<div id="everything">

<div class="box">
<a href="who am i.html"><div class="img"><img src="who am i.png" /></div></a>
<div class="wrapper">
    <div class="title">Who Am I?</div>
    <div class="description">A project for English class describing who I am through different medias and explained by unit questions.</div>
</div>
<div class="notes" contenteditable="true">Complete.</div>
</div>

<a href="#" class="back-to-top" onclick="saveEdits()">S</a>

</div><!--End everything-->
</body>

但我的页面实际上并没有正常工作;它不会加载更新的版本。从查看function saveEdits() { //get the editable element var edited = document.getElementById("everything"); //get the edited element content var userVersion = edited.innerHTML; //save the content to local storage var localStorage.Edits = userVersion; } function checkEdits() { //find out if the user has previously saved edits if(localStorage.Edits != null) document.getElementById("everything").innerHTML = localStorage.Edits; }开始，似乎它甚至没有正确保存它。

为什么不起作用？我该如何解决？我的计划在概念上是否存在错误？任何帮助，将不胜感激;谢谢！

Answer 1

对于localStorage，您可以get/setItem例如

function saveEdits() {

  //get the editable element
  var edited = document.getElementById("everything");

  //get the edited element content
  var userVersion = edited.innerHTML;

  //save the content to local storage
  localStorage.setItem('Edits', userVersion);

}

function checkEdits() {

  //find out if the user has previously saved edits
  var savedEdits = localStorage.getItem('Edits');

  if (savedEdits != null) {
    document.getElementById("everything").innerHTML = savedEdits;
  }
}

https://developer.mozilla.org/en-US/docs/Web/API/Storage

您可能还注意到此代码未使用/需要jQuery ...

通过jQuery和localStorage“更新”网页

1 个答案: