通过jQuery和localStorage“更新”网页

所以我有一个使用HTML创建的主页。我通过打开HTML文件从计算机上运行它。我试图添加一个功能，允许我从页面编辑它（使用content-editable或append），而不是源代码。为了实现这一点，我想出了使用localStorage来保存网页的更新版本，并从该更新版本加载页面。见here。（理论上，我会定期更新localStorage版本的源代码，以便全部匹配。）通过jQuery和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，似乎它甚至没有妥善保存它。

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

来源

2015-09-26 TheFirstQuestion

对于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的不使用/需要这种代码...

来源

2015-09-26 01:05:15 pherris

完美的作品！谢谢！而且，我离开了iQuery的标题......哎呀。 – TheFirstQuestion

通过jQuery和localStorage“更新”网页

回答

相关问题