本地存储不获取超过 6 个项目

Question

我正在使用 django 开发简历生成器网站。我想要的是当用户尝试编辑预建简历模板时我想将数据存储在本地存储中。这样用户即使在刷新后仍留在页面上。我所做的是创建一个对象，该对象存储 HTML 的每个值，然后将其设置为本地存储。但是当我 getItem 然后它最多只获取 5 个元素之后当我更改模板中的任何内容时它存储到本地存储但不获取它。请帮助我。

<!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>&emsp;</td>

                            <td><b id = 'Board'>Board/University&emsp;</b></td>

                            <td><b id = 'Clg-Name'>Name Of Institute&emsp;</b></td>

                            <td><b id  = 'yearofpassing'>Year Of Passing&emsp;&emsp;</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>

这是我的模板我删除了一些私人信息。

我的 javaScript 文件：

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

我知道我写的很奇怪javascript但是请帮助我。

或者建议用其他方法来做同样的事情。不懂太多我只是web开发的初学者

Answer 1

您不能像这样读取属性名称中包含连字符的属性：

'-'、'+'、'*'等为操作数。您可以理解为什么它们不起作用。

document.getElementById('Clg-name').innerText = mysessionData.Clg-Name

试试这个：

document.getElementById('Clg-name').innerText = mysessionData['Clg-Name'];

本地存储不获取超过 6 个项目

Local Storage not fetching more than 6 item

javascript

session-storage

local-storage