Javascript 本地存储获取的项目不超过6个
我在django的一个简历网站上工作。我想要的是，当用户试图编辑预构建简历模板时，我希望将数据存储在本地存储器中。这样，即使在刷新之后，用户也可以留在页面上。我所做的是创建一个对象，它存储HTML的每个值，然后我将它设置为本地存储。 但当我获取Item时，它最多只获取5个元素，之后当我更改模板中的任何内容时，它将存储到本地存储中，但不获取它。请帮帮我Javascript 本地存储获取的项目不超过6个,javascript,local-storage,session-storage,Javascript,Local Storage,Session Storage,我在django的一个简历网站上工作。我想要的是，当用户试图编辑预构建简历模板时，我希望将数据存储在本地存储器中。这样，即使在刷新之后，用户也可以留在页面上。我所做的是创建一个对象，它存储HTML的每个值，然后我将它设置为本地存储。 但当我获取Item时，它最多只获取5个元素，之后当我更改模板中的任何内容时，它将存储到本地存储中，但不获取它。请帮帮我 <!DOCTYPE html> <html> <head> <title&
<!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;" id="edit0" contenteditable="true" class = "save">
</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" contenteditable="true">
<b id="edit1" 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 id ='course'>Course</b> </td>
<td><b id = 'Board'>Board/University </b></td>
<td><b id = 'Clg-Name'>Name Of Institute </b></td>
<td><b id = 'yearofpassing'>Year Of Passing  </b></td>
<td><b id = 'percentage'>Percentage/CGPA</b></td>
</tr>
<tr>
</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 id = 'tech-skill0'>Beginner of Jquery, Bootstrap, Nodejs, Reactjs, Express, Mongodb.</li>
<li id = 'tech-skill1'>Proficient in C, Python, HTML, CSS.</li>
<li id = 'tech-skill2'>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 id = 'training-attended0'>Attended 40 days training on "C++" at "WEBCOM Technologies, Yamunanagar" (June 2019 to July 2019).</li>
<li id = 'training-attended1'>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 id = 'project-name0'>TRAVEL MANIA - </b>
</div>
<div style="font-style:italic; float:right; margin-right:40px" id = 'project-duration0'>(Duration - 2 months)</div>
<div style="float:none">
<br>
<p id = 'project-description0'>(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.)</p>
</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 id = 'project-name1'>JARVIS - PERSONAL ASSISTANT - </b>
</div>
<div style="font-style:italic; float:right; margin-right:48px" id = 'project-duration1'>(Duration - 1 week)</div>
<div style="float:none">
<br>
<p id = 'project-description1'>(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.)</p>
</div>
<br>
</li>
<li id="edit12" contenteditable="true" style="padding:2px;" class = "save">
<div style="float:left">
<b id = 'project-name2'>RESPRO - </b>
</div>
<div style="font-style:italic; float:right; margin-right:40px" id = 'project-duration2'>(Duration - 2 months)</div>
<div style="float:none">
<br>
<p id = 'project-description2'>(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.)</p>
</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 id = 'softskill0'>Teamwork</li>
<li id = 'softskill1'>Leadership</li>
<li id = 'softskill2'>Communication skills</li>
<li id = 'softskill3'>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 id = 'Achievement0'>Won third position in FashP competition (2019).</li>
<li id = 'Achievement1'>Won first position in Flower Arrangement competition (2012).</li>
<li id = 'Achievement2'>Won second position in Drawing competition (2012).</li>
<li id = 'Achievement3'>Won certificate for best entry in group D of All India Camel Color Contest (2011).</li>
<li id = 'Achievement4'>Participated in Snacks Making competition (2011).</li>
<li id = 'Achievement5'>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">
</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>
简历模板！
.模板
{
背景色：#fafdfc；
高度：650px；
宽度：550px；
边框：3件纯蓝；
盒影：1px 1px 6px；
填充：10px；
浮动：左；
}
#临时工
{
利润率：35px 168px；
}
@媒体印刷品{
身体*{
可见性：隐藏；
}
.打印容器，.打印容器*{
能见度：可见；
}
}
职业目标
将自己与一家声誉卓著的公司联系在一起，在那里我可以利用自己的技能实现公司的目标，并提高自己的能力和潜力
学历
课程&emsp；
董事会/大学和emsp；
机构名称&emsp；
通过年份&emsp&emsp；
百分比/CGPA
技术技能
Jquery、Bootstrap、Nodejs、Reactjs、Express、Mongodb的初学者
- 精通C、Python、HTML和CSS
- C++、SQL、数据结构、DBMS、JavaScript、
的充分知识
参加的培训
- 参加了在“亚穆纳加尔WEBCOM Technologies”举办的为期40天的“C++”培训（2019年6月至2019年7月）
- 参加了从“Udemy”（2020年7月至2020年8月）开始的21.5小时的“Python”培训
开展的学术项目
-
旅游狂热-
（期限-2个月）
（这是一个旅行网站，用户可以轻松计划旅行。这是一个团队项目，我曾在其中担任前端开发人员。）
-
贾维斯-私人助理-
（持续时间-1周）
（该项目帮助最终用户进行日常活动，如在谷歌搜索查询、查找位置、发送电子邮件、播放歌曲、搜索instagram个人资料、打开网络摄像头等。）
-
反应
（期限-2个月）
（这是一个网站，提供了一种为个人创建简历和求职信的简单而有效的方法。它是w
window.stop();
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");
}
});
const element = document.getElementById('temp');
if (typeof Storage !== 'undefined'){
element.addEventListener("keypress", function(event){
const myObject ={
'name': document.getElementById('name').innerText,
'address': document.getElementById('address').innerText,
'mobile': document.getElementById('mobile').innerText,
'e-mail': document.getElementById('e-mail').innerText,
'linkedin': document.getElementById('linkedin-id').innerText,
'career': document.getElementById('edit1').innerText,
'text': document.getElementById('edit2').innerText,
'education': document.getElementById('edit3').innerText,
'course': document.getElementById('course').innerText,
'Board': document.getElementById('Board').innerText,
'Clg-name': document.getElementById('Clg-Name').innerText,
'yearofpassing': document.getElementById('yearofpassing').innerText,
'percentage': document.getElementById('percentage').innerText,
'class0' : document.getElementById('class0').innerText,
'uni-name0': document.getElementById('uni-name0').innerText,
'college0': document.getElementById('college0').innerText,
'year0': document.getElementById('year0').innerText,
'percent0': document.getElementById('percent0').innerText,
'class1': document.getElementById('class1').innerText,
'uni-name1': document.getElementById('uni-name1').innerText,
'college1': document.getElementById('college1').innerText,
'year1': document.getElementById('year1').innerText,
'percent1': document.getElementById('percent1').innerText,
'class2': document.getElementById('class2').innerText,
'uni-name2': document.getElementById('uni-name2').innerText,
'college2': document.getElementById('college2').innerText,
'year2': document.getElementById('year2').innerText,
'percent2': document.getElementById('percent2').innerText,
'edit5': document.getElementById('edit5').innerText,
'tech-skill0': document.getElementById('tech-skill0').innerText,
'tech-skill1': document.getElementById('tech-skill1').innerText,
'tech-skill2': document.getElementById('tech-skill2').innerText,
'edit7': document.getElementById('edit7').innerText,
'training-attended0': document.getElementById('training-attended0').innerText,
'training-attended1': document.getElementById('training-attended1').innerText,
'edit9': document.getElementById('edit9').innerText,
'project-name0': document.getElementById('project-name0').innerText,
'project-duration0': document.getElementById('project-duration0').innerText,
'project-description0': document.getElementById('project-description0').innerText,
'project-name1': document.getElementById('project-name1').innerText,
'project-duration1': document.getElementById('project-duration1').innerText,
'project-description1': document.getElementById('project-description1').innerText,
'project-name2': document.getElementById('project-name2').innerText,
'project-duration2': document.getElementById('project-duration2').innerText,
'project-description2': document.getElementById('project-description2').innerText,
'edit13': document.getElementById('edit13').innerText,
'softskill0': document.getElementById('softskill0').innerText,
'softskill1': document.getElementById('softskill1').innerText,
'softskill2': document.getElementById('softskill2').innerText,
'softskill3': document.getElementById('softskill3').innerText,
'edit15': document.getElementById('edit15').innerText,
'Achievement0': document.getElementById('Achievement0').innerText,
'Achievement1': document.getElementById('Achievement1').innerText,
'Achievement2': document.getElementById('Achievement2').innerText,
'Achievement3': document.getElementById('Achievement3').innerText,
'Achievement4': document.getElementById('Achievement4').innerText,
'Achievement5': document.getElementById('Achievement5').innerText,
'edit17': document.getElementById('edit17').innerText,
'father': document.getElementById('father').innerText,
'father-Name': document.getElementById('father-Name').innerText,
'mother': document.getElementById('mother').innerText,
'mother-Name': document.getElementById('mother-Name').innerText,
'dof': document.getElementById('dof').innerText,
'date': document.getElementById('date').innerText,
'martial-status': document.getElementById('martial-status').innerText,
'status': document.getElementById('status').innerText,
'hobbies': document.getElementById('hobbies').innerText,
'hobby': document.getElementById('hobby').innerText,
};
localStorage.setItem("Content",JSON.stringify(myObject));
})
}
const mysessionData = JSON.parse(localStorage.getItem("Content"));
document.getElementById('edit1').innerText = mysessionData.career
document.getElementById('edit2').innerText = mysessionData.text
document.getElementById('edit3').innerText = mysessionData.education
document.getElementById('course').innerText = mysessionData.course
document.getElementById('Board').innerText = mysessionData.Board
document.getElementById('Clg-name').innerText = mysessionData.Clg-Name
document.getElementById('yearofpassing').innerText = mysessionData.yearofpassing
document.getElementById('percentage').innerText = mysessionData.percentage
document.getElementById('class0').innerText = mysessionData.class0
document.getElementById('uni-name0').innerText = mysessionData.uni-name0
document.getElementById('college0').innerText = mysessionData.college
document.getElementById('year0').innerText = mysessionData.year0
document.getElementById('percent0').innerText = mysessionData.percent0
document.getElementById('class1').innerText = mysessionData.class1
document.getElementById('uni-name1').innerText = mysessionData.uni-name1
document.getElementById('college1').innerText = mysessionData.college1
document.getElementById('year1').innerText = mysessionData.year1
document.getElementById('percent1').innerText = mysessionData.percent1
document.getElementById('class2').innerText = mysessionData.class2
document.getElementById('uni-name2').innerText = mysessionData.uni-name2
document.getElementById('college2').innerText = mysessionData.college2
document.getElementById('year2').innerText = mysessionData.year2
document.getElementById('percent2').innerText = mysessionData.percent2
document.getElementById('edit5').innerText = mysessionData.edit5
document.getElementById('tech-skill0').innerText = mysessionData.tech-skill0
document.getElementById('tech-skill1').innerText = mysessionData.tech-skill1
document.getElementById('tech-skill2').innerText = mysessionData.tech-skill2
document.getElementById('edit7').innerText = mysessionData.edit7
document.getElementById('training-attended0').innerText = mysessionData.training-attended0
document.getElementById('training-attended1').innerText = mysessionData.training-attended1
document.getElementById('edit9').innerText = mysessionData.edit9
document.getElementById('project-name0').innerText = mysessionData.project-name0
document.getElementById('project-duration0').innerText = mysessionData.project-duration0
document.getElementById('project-description0').innerText = mysessionData.project-description0
document.getElementById('project-name1').innerText = mysessionData.project-name1
document.getElementById('project-duration1').innerText = mysessionData.project-duration1
document.getElementById('project-description1').innerText = mysessionData.project-description1
document.getElementById('project-name2').innerText = mysessionData.project-name2
document.getElementById('project-duration2').innerText = mysessionData.project-duration2
document.getElementById('project-description2').innerText = mysessionData.project-description2
document.getElementById('edit13').innerText = mysessionData.edit13
document.getElementById('softskill0').innerText = mysessionData.softskill0
document.getElementById('softskill1').innerText = mysessionData.softskill1
document.getElementById('softskill2').innerText = mysessionData.softskill2
document.getElementById('softskill3').innerText = mysessionData.softskill3
document.getElementById('edit15').innerText = mysessionData.edit15
document.getElementById('Achievement0').innerText = mysessionData.Achievement0
document.getElementById('Achievement1').innerText = mysessionData.Achievement1
document.getElementById('Achievement2').innerText = mysessionData.Achievement2
document.getElementById('Achievement3').innerText = mysessionData.Achievement3
document.getElementById('Achievement4').innerText = mysessionData.Achievement4
document.getElementById('Achievement5').innerText = mysessionData.Achievement5
document.getElementById('edit17').innerText = mysessionData.edit17
document.getElementById('father').innerText = mysessionData.father
document.getElementById('father-name').innerText = mysessionData.father-Name
document.getElementById('mother').innerText = mysessionData.mother
document.getElementById('mother-name').innerText = mysessionData.mother-Name
document.getElementById('dof').innerText = mysessionData.dof
document.getElementById('date').innerText = mysessionData.date
document.getElementById('martial-status').innerText = mysessionData.martial-status
document.getElementById('status').innerText = mysessionData.status
document.getElementById('hobbies').innerText = mysessionData.hobbies
document.getElementById('hobby').innerText = mysessionData.hobby
document.getElementById('Clg-name').innerText = mysessionData.Clg-Name
document.getElementById('Clg-name').innerText = mysessionData['Clg-Name'];