通過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「更新」網頁

回答

相關問題