页面上的所有内容在第一次加载时都不会出现，需要刷新然后才能工作

问题描述

从技术上讲，没有错误，尽管在访问网页时您不希望为了加载内容而必须刷新，因此代码没有尽可能高效和流畅地运行。

控制台日志中显示的错误如下：

jquery.min.js:2 Uncaught TypeError: Cannot read property 'length' of null
    at HTMLDocument.<anonymous> (subject-page.html?subjectID=2:375)
    at l (jquery.min.js:2)
    at c (jquery.min.js:2)

当我单击刷新浏览器按钮时，此错误消失并且一切正常。所以我认为这与加载页面或在不同时间调用某些函数有关，尽管我不太确定并且希望得到任何帮助。

这是决定某些页面内容的 JavaScript

$(document).ready(function() {
  if (getParameterByName('subjectID') > 0) {
    localStorage.setItem("myFutureCurrentSubjectID",getParameterByName('subjectID'));
    getSubject();
    getTopicsForSubject();
    var topicsstring = JSON.parse(localStorage.getItem('myFuturetopicsForSubject'));
  } else {
    getSubject();
    getTopicsForSubject();
    var topicsstring = JSON.parse(localStorage.getItem('myFuturetopicsForSubject'));
  }
  var userName = localStorage.getItem('myFutureUserName');
  document.getElementById('tabtitle').innerHTML = userName + "'s Future - " + localStorage.getItem('myFutureCurrentSubject');
  document.getElementById('subjectTitle').innerHTML = localStorage.getItem('myFutureCurrentSubject');
  document.getElementById('menuSubjectName').innerHTML = localStorage.getItem('myFutureCurrentSubject');
  localStorage.removeItem('myFutureCurrentTopic');
  if (topicsstring.length - 1 >= 1) {
    document.getElementById('topicCard1Title').innerHTML = topicsstring[0];
  }
  if (topicsstring.length - 1 >= 2) {
    document.getElementById('topicCard2Title').innerHTML = topicsstring[1];
  }
  if (topicsstring.length - 1 >= 3) {
    document.getElementById('topicCard3Title').innerHTML = topicsstring[2];
  }
  if (topicsstring.length - 1 >= 4) {
    document.getElementById('topicCard4Title').innerHTML = topicsstring[3];
  }
  if (topicsstring.length - 1 >= 5) {
    document.getElementById('topicCard5Title').innerHTML = topicsstring[4];
  }
  if (topicsstring.length - 1 >= 6) {
    document.getElementById('topicCard6Title').innerHTML = topicsstring[5];
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

解决方法

这只是表明对于键 myFutureTopicsForSubject，当您第一次加载页面时，localStorage 中不存在特定值，因此访问它会返回 null，这使得您的 { {1}} 设置为 topicsString。

尽管在每次后续加载中，即使关闭选项卡或浏览器，您也不得获得 null，因为 null 具有更广泛的保存该值的范围。您要么明确地执行此操作，并使用开发者控制台从 localStorage 中删除 key，或者您在此处未共享的部分代码是有条件地执行此操作。