"Updating" 网页通过 jQuery 和 localStorage

Question

所以我有一个使用 HTML 创建的主页。我通过打开 HTML 文件运行将它从我的计算机上移除。我正在尝试添加一项允许我从页面（使用 content-editable 或 append）而不是源代码对其进行编辑的功能。为此，我想出了使用 localStorage 来保存网页的更新版本，并从该更新版本加载页面。参见 here。（理论上，我会定期更新 localStorage 版本的源代码，以便它们全部匹配。）

但是，当我尝试时，我的页面不会更新。我已将一个版本保存到 localStorage，但程序似乎无法覆盖该版本或类似内容。

我的 HTML 看起来像这样：

<!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>

我的 JavaScript 看起来像这样：

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;

}

但是我的页面实际上不能正常工作；它不会加载更新版本。从查看 localStorage 来看，好像它甚至没有正确保存它。

为什么不起作用？我该如何解决？我的计划在概念上有什么不正确的地方吗？任何帮助，将不胜感激;谢谢！

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 不是此代码的 used/required...

"Updating" 网页通过 jQuery 和 localStorage

"Updating" webpage through jQuery and localStorage

html

javascript

contenteditable

local-storage