Local Storage not fetching more than 6 item

I am working on a Resume builder website in django. what I wanted is when a user tries to edit prebuild resume template I want to store data in local storage. So that users stay on the page even after refresh. What I have done is created an object which is storing every value of HTML then I have set it to local storage.
but when I getItem then It is fetching only a max 5 elements after that when I change any content in the template it is storing into local storage but not fetching it. Please help me.

<!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>

Here Is my template I have deleted some private information.

My javaScript File :

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

I know I have written very weird javascript but please Help me.

Or suggest some other way to do the same thing. I don’t know much I am just a beginner in web development.

I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (’).

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.