本地存储和DOM：在我使用设置员访问页面之前，内容是不可见的

Question

This is the website , if you scroll down at the bottom you will notice everything is invisible: This probably has to do with DOM conflict with LocalStorage.

When you visit the page with the setters, and go back to the home page you will notice the content is coming back.

Here is my code:

Page with the setters (Parent file):

//code is at the end of the body of the page

    localStorage.setItem("tit1",$('#r1c1Title').text());
    localStorage.setItem("tit2",$('#r1c2Title').text());

   localStorage.setItem("l1",document.getElementById("r1c1Link").href);
   localStorage.setItem("l2",document.getElementById("r1c2Link").href);

  localStorage.setItem("im1",$('#r1c1Image').attr('src'));
   localStorage.setItem("im2",$('#r1c2Image').attr('src'));

custom.js included in every other html file:

 //Retrieve Titles
    var result  = localStorage.getItem("tit1");
    var result2 = localStorage.getItem("tit2");

     //Retrieve Links
     var r3= localStorage.getItem("l1");
     var r33= localStorage.getItem("l2");

     //Retrieve Image SRCs
     var r4 = localStorage.getItem("im1");
     var r44 = localStorage.getItem("im2");



    //print titles
    $("#ti1").html(result);
    $("#ti2").html(result2);

   //print links
    $("#link1").attr("href", r3);
    $("#link2").attr("href", r33);

   //print images
       $("#img1").attr("src",r4);
       $("#img2").attr("src",r44);

Answer 1

You have not set the items in storage in your index page but in the other pages. In the index page, you have just used custom.js that seems to be getting items rather than setting. So flow you are doing is, getting the item from the storage from index page(which does not exist) and then only setting item to the storage from other page(and of course, the user can sees the second time he goes to the index page because of this). You need to set the item first.