【发布时间】：2021-08-08 09:40:05
【问题描述】：
我试图制作一个可编辑的简历模板。我想要从本地存储到用户在我的模板中添加的任何内容，即使在刷新后也会保留。
这是我的模板：
<!DOCTYPE html>
<html>
<head>
<title>Resume Template!</title>
<style>
.template
{
background-color:#fafdfc;
height:650px;
width:550px;
border:3px solid blue;
box-shadow:1px 1px 6px;
padding:10px;
float:left;
}
#temp
{
margin:35px 168px;
}
@media print{
body *{
visibility: hidden;
}
.print-container, .print-container *{
visibility: visible;
}
}
</style>
</head>
<body>
<div id="temp" class = "print-container" >
<div class="template" style="float:left; margin-right:15px;">
<div style="float:left;padding:2px;" contenteditable="true" id="edit0" class = "save">
<p id = "edit">
<b style="font-size:14px;" id = 'name'></b>
<br>
<b style="font-size:11px;"></b>
<br>
<b style="font-size:11px;"></b>
<br>
<b style="font-size:11px;"></b>
<br>
<b style="font-size:11px;"></b>
</p>
</div>
<div>
<img src="images/resume%20pic.jpg" style="height:100px; width:100px; margin-left:56px; margin-right:20px; margin-top:8px">
</div>
<div style="float:none">
<p style="border-top:1px solid black;"></p>
<p style="font-size:12px; background-color:lightgrey; padding:3px">
<b id="edit1" contenteditable="true" style="padding:3px;" class = "save">CAREER OBJECTIVE</b>
</p>
<p style="font-size:11px;padding:2px;" contenteditable="true" id="edit2" class ="save">To associate myself with a reputed organization where I can utilize my skills to fulfil the goals & objectives of the organization and could enhance my competencies and potential.</p>
<p style="font-size:12px; background-color:lightgrey; padding:3px">
<b contenteditable="true" id="edit3" style="padding:3px;" class = "save">EDUCATIONAL QUALIFICATION</b>
</p>
<table style="font-size:11px; border:1px solid black;padding:4px;" contenteditable="true" id="edit4" class = "save">
<tr>
<td><b>Course</b> </td>
<td><b>Board/University </b></td>
<td><b>Name Of Institute </b></td>
<td><b>Year Of Passing  </b></td>
<td><b>Percentage/CGPA</b></td>
</tr>
<tr>
<td>B.tech (CSE)</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td>CBSE</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td>ICSE</td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
<p style="font-size:12px; background-color:lightgrey; padding:3px">
<b contenteditable="true" id="edit5" style="padding:3px;" class = "save">TECHNICAL SKILLS</b>
</p>
<ul style="font-size:11px; padding-left:15px;padding-bottom:2px;padding-right:2px;padding-top:2px;" contenteditable="true" id="edit6" class = "save">
<li>Beginner of Jquery, Bootstrap, Nodejs, Reactjs, Express, Mongodb.</li>
<li>Proficient in C, Python, HTML, CSS.</li>
<li>Sufficient Knowledge of C++, SQL, Data Structure, DBMS, Javascript.</li>
</ul>
<p style="font-size:12px; background-color:lightgrey; padding:3px">
<b contenteditable="true" id="edit7" style="padding:3px;" class = "save">TRAININGS ATTENDED</b>
</p>
<ul style="font-size:11px; padding-left:15px;padding-bottom:2px;padding-right:2px;padding-top:2px;" contenteditable="true" id="edit8" class = "save">
<li>Attended 40 days training on "C++" at "WEBCOM Technologies, Yamunanagar" (June 2019 to July 2019).</li>
<li>Attended 21.5 hours training on "Python" from "Udemy" (July 2020 to Aug 2020).</li>
</ul>
<p style="font-size:12px; background-color:lightgrey; padding:3px">
<b contenteditable="true" style="padding:3px;" id="edit9" class = "save">ACADEMIC PROJECTS UNDERTAKEN</b>
</p>
<ul style="font-size:11px; padding-left:15px">
<li contenteditable="true" style="padding:2px;" id="edit10" class = "save">
<div style="float:left">
<b>TRAVEL MANIA - </b>
</div>
<div style="font-style:italic; float:right; margin-right:40px">(Duration - 2 months)</div>
<div style="float:none">
<br>
(It is a travelling website that enables users to plan their travel without any hassle. It is a team project in which I worked as a front-end developer.)
</div>
<br>
<br>
</li>
</ul>
</div>
</div>
<div class="template">
<ul style="font-size:11px; padding-left:15px">
<li id="edit11" contenteditable="true" style="padding:2px;" class = "save">
<div style="float:left">
<b>JARVIS - PERSONAL ASSISTANT - </b>
</div>
<div style="font-style:italic; float:right; margin-right:48px">(Duration - 1 week)</div>
<div style="float:none">
<br>
(This project assists the end-user with day to day activities like searching queries in Google, finding locations, sending emails, playing songs, searching instagram profiles, opening webcam and many more.)
</div>
<br>
</li>
<li id="edit12" contenteditable="true" style="padding:2px;" class = "save">
<div style="float:left">
<b>RESPRO - </b>
</div>
<div style="font-style:italic; float:right; margin-right:40px">(Duration - 2 months)</div>
<div style="float:none">
<br>
(It is a website that provides a simple and efficient way of creating resume and cover letter for individuals. It is a team project in which I worked as a front-end developer.)
</div>
</li>
</ul>
<p style="font-size:12px; background-color:lightgrey; padding:3px">
<b id="edit13" contenteditable="true" style="padding:3px;" class = "save">SOFT SKILLS</b>
</p>
<ul style="font-size:11px; padding-left:15px;padding-bottom:2px;padding-right:2px;padding-top:2px;" contenteditable="true" id="edit14" class = "save">
<li>Teamwork</li>
<li>Leadership</li>
<li>Communication skills</li>
<li>Time management</li>
</ul>
<p style="font-size:12px; background-color:lightgrey; padding:3px">
<b contenteditable="true" id="edit15" style="padding:3px;" class = "save">ACHIEVEMENTS</b>
</p>
<ul style="font-size:11px; padding-left:15px;padding-bottom:2px;padding-right:2px;padding-top:2px;" contenteditable="true" id="edit16" class = "save">
<li>Won third position in FashP competition (2019).</li>
<li>Won first position in Flower Arrangement competition (2012).</li>
<li>Won second position in Drawing competition (2012).</li>
<li>Won certificate for best entry in group D of All India Camel Color Contest (2011).</li>
<li>Participated in Snacks Making competition (2011).</li>
<li>Participated in many Dance competitions.</li>
</ul>
<p style="font-size:12px; background-color:lightgrey; padding:3px">
<b contenteditable="true" id="edit17" style="padding:3px;" class = "save">PERSONAL PROFILE</b>
</p>
<p style="font-size:12px;padding:2px;" contenteditable="true" id="edit18" class = "save">
<b></b>
<br>
<b> </b>
<br>
<b></b>
<br>
<b> </b>
<br>
<b>Hobbies - </b>Crafting, modeling, listening to music
</p>
</div>
</div>
<button id = "safe">Save</button>
<input type="button" id = 'print' onclick = "window.print();" value = "print">
<script src ="script.js" charset="utf-8"></script>
</body>
</html>
这是我的 js：
document.getElementById("safe").addEventListener("click", function(){
var x = document.querySelectorAll(".save");
for(var i =0; i<x.length; i++)
{
x[i].removeAttribute("contenteditable");
}
});
document.getElementById("temp").addEventListener("click", function(){
var x = document.querySelectorAll(".save");
for(var i = 0; i<x.length; i++){
x[i].setAttribute('contenteditable', "true");
}
});
var store = document.getElementById('name');
function populateStorage(){
localStorage.setItem('name',document.getElementById('name').innerHTML)
var store = localStorage.getItem('name')
document.getElementById('name').innerHTML = store;
}
store.onchange = populateStorage;
目前，我尝试在 localStorage 中仅保存一项，即id = name，即使在刷新后也可以将其取回。
请帮帮我，这很令人沮丧。
【问题讨论】：
-
您可以选择创建一个轮询函数，定期将整个 DOM 内容插入本地存储。然后，您可以在挂载时从本地存储中注入整个保存的 HTML
-
@Andrew 感谢您的建议。其实我不知道怎么申请，请你提供资源。
标签： javascript html jquery local-storage session-storage