如何在刷新后使用js将项目保存在本地存储中

我正在尝试制作一个可编辑的简历模板。从本地存储到用户在模板中添加的内容，我想要的内容即使在刷新后也会保留下来。

这是我的模板：

<!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>&emsp;</td>
<td><b>Board/University&emsp;</b></td>
<td><b>Name Of Institute&emsp;</b></td>
<td><b>Year Of Passing&emsp;&emsp;</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，即使在刷新后也能将其取回。

请帮帮我，这很令人沮丧。

因此，您误解的一件事是localStorage即使在刷新页面后也会保留数据。

尽管在向本地存储添加任何内容之前，您可能需要添加一个检查本地存储中是否有数据。现在你正在添加任何内容，而没有查找任何

if(localStorage.getItem('name') == undefined ) {
// set name data hee
}else {
// use the pre-existing data.
}

store.onchange不触发，因为name元素的根父级也是可编辑的，所以实际上是在更改edit0，而不是更改name。您应该监听id="edit"的input事件。

edit.addEventListener('input', ()=> { console.log('trigger') })

当元素具有contentEditable属性时，应该侦听input事件。

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

相关内容

最新更新

热门标签：