Access Variable from LocalStorage for different page

I have project to make CV maker that can display user data that user filled in form.html and display it to CV_result.html . The problem is when form submitted and directed me to CV_result.html , data from user didnt show. I tried to check localStorage in console and i found localStorage is empty and got error message “Uncaught TypeError: Cannot read property ‘myPhoto’ of null at CV_result.html”. I search this problem all week and i cant found solution.
i come up with several method for example

**This my form html used for input data**

“`

<form id=”regForm” action=”/CV_result.html”>

<!– One “tab” for each step in the form: –>

<fieldset>
<legend style=”text-align: center;”> Data Diri </legend>

<!– <label for=”myPhoto”>Select a file for photo profil:</label>
<input type=”file” id=”myPhoto” name=”myPhoto” required> –>

<input type=”text” placeholder=”Nama lengkap…” id=”fullName” name=”fullName” required>

<label for=”gender”>Jenis Kelamin</label>
<select id=”gender” id=”gender” name=”gender”>
<option value=”female”>Perempuan</option>
<option value=”male”>Laki-laki</option>
<option value=”secret”>Tidak ingin memberitahu</option>
</select>

<label for=”birthday”>Tempat dan Tangal lahir :</label>
<div class=”flex-container”>
<input style=”width: 50%;” type=”text” placeholder=”Tempat lahir…” id=”bornPlace” name=”bornPlace”
required>
<input style=”width: 50%;margin-left: 10px;” type=”date” id=”birthday” name=”birthday”>
</div>

<input type=”text” placeholder=”alamat domisili…” id=”address” name=”address” required>

<label for=”phone”>Nomor Telepon: </label>
<input type=”tel” placeholder=”+62″ id=”phone” name=”phone” required>

<label for=”email”>Alamat Email:</label>
<input type=”email” placeholder=”[email protected]” id=”email” name=”email” required>

<input type=”text” placeholder=”username dari github” id=”usernameGithub” name=”usernameGithub”>
<input type=”text” placeholder=”username dari Linkedin” id=”usernameLinkedin” name=”usernameLinkedin”>
<input type=”text” placeholder=”username dari Instagram” id=”usernameInstagram” name=”usernameInstagram”>

<textarea placeholder=” Beritahu sesuatu tentang dirimu” id=”summaryProfle” name=”summaryProfle”
style=”height:200px”></textarea>

<!– language –>
<fieldset>
<legend style=”text-align: center;”>Bahasa</legend>
<div class=”flex-container”>
<input style=”width: 50%;” type=”text” placeholder=”bahasa yang dikuasai” id=”languageName1″
name=”languageName1″></input>
<select style=”width: 50%;margin-left: 10px;” id=”languageLevel1″ name=”languageLevel1″>
<option value=”Beginner”>Pemula</option>
<option value=”Intermediate”>Menengah</option>
<option value=”Advanced”>Mahir</option>
</select>
</div>

<div class=”flex-container”>
<input style=”width: 50%;” type=”text” placeholder=”bahasa yang dikuasai” id=”languageName2″
name=”languageName2″></input>
<select style=”width: 50%;margin-left: 10px;” id=”languageLevel2″ name=”languageLevel2″>
<option value=”Beginner”>Pemula</option>
<option value=”Intermediate”>Menengah</option>
<option value=”Advanced”>Mahir</option>
</select>
</div>
</fieldset>

<fieldset style=”margin-top: 16px;”>
<legend style=” text-align: center;”> Hobi </legend>
<div class=”flex-container”>
<input type=”text” placeholder=”Hobi pertama” id=”hobby1″ name=”hobby1″>
<input type=”text” placeholder=”Hobi kedua” id=”hobby2″ name=”hobby2″>
<input type=”text” placeholder=”Hobi ketiga” id=”hobby3″ name=”hobby3″>
<input type=”text” placeholder=”Hobi Keempat” id=”hobby4″ name=”hobby4″>
</div>
</fieldset>

</fieldset>

<!– /* Tombol Submit */ –>
<button id=”submit” type=”submit” onclick=”setValue()” style=”margin-left: 45%;”> Submit </button>

</form>

<script>
function setValue(event) {
event.preventDefault();
//profile
var myPhoto = document.getElementById(“myPhoto”).value;
var fullName = document.getElementById(“fullName”).value;
var gender = document.getElementById(“gender”).value;
var bornPlace = document.getElementById(“bornPlace”).value;
var birthday = document.getElementById(“birthday”).value;
var address = document.getElementById(“address”).value;
var phone = document.getElementById(“phone”).value;
var email = document.getElementById(“email”).value;
var usernameGithub = document.getElementById(“usernameGithub”).value;
var usernameLinkedin = document.getElementById(“usernameLinkedin”).value;
var usernameInstagram = document.getElementById(“usernameInstagram”).value;
var summaryProfile = document.getElementById(“summaryProfile”).value;

// skill,language,hobbies
var languageName1 = document.getElementById(“languageName1”).value;
var languageLevel1 = document.getElementById(“languageLevel1”).value;
var languageName2 = document.getElementById(“languageName2”).value;
var languageLevel2 = document.getElementById(“languageLevel2”).value;

var hobby1 = document.getElementById(“hobby1”).value;
var hobby2 = document.getElementById(“hobby2”).value;
var hobby3 = document.getElementById(“hobby3”).value;
var hobby4 = document.getElementById(“hobby4”).value;

var UserData = {

myPhoto,
fullName,
gender,
bornPlace,
birthday,
address,
phone,
email,
urlFB,
urlGithub,
urlLinkedin,
urlInstagram,
summaryProfile,

languageName1,
languageLevel1,
languageName2,
languageLevel2,

hobby1,
hobby2,
hobby3,
hobby4,
}

console.log(“userData”, UserData);
alert(“Done”);
let jsnUserData = JSON.stringify(userData)
window.localStorage.setItem(“userData”, jsnUserData);
console.log(jsnUserData, “<<<<<<<=====”);
location = “CV_result.html”
}
</script>

“`

**This my CV_result used for display data**

“`


<body>
<div class=”academicInfo”>
<h3 class=”academicQual”>Data</h3>
<table class=”table”>
<tbody>
<!– <tr>
<th scope=”row”>myPhoto</th>
<td id=”myPhoto”></td>
</tr> –>
<tr>
<th scope=”row”>fullName</th>
<td id=”fullName”></td>
</tr>
<tr>
<th scope=”row”>gender</th>
<td id=”gender”></td>
</tr>
<tr>
<th scope=”bornPlace”></th>
<td id=”bornPlace”></td>
</tr>
<tr>
<th scope=”row”>birthday</th>
<td id=”birthday”></td>
</tr>
<tr>
<th scope=”row”>address</th>
<td id=”address”></td>
</tr>
<tr>
<th scope=”row”>phone</th>
<td id=”phone”></td>
</tr>
<tr>
<th scope=”row”>email</th>
<td id=”email”></td>
</tr>
<tr>
<th scope=”row”>usernameGithub</th>
<td id=”usernameGithub”></td>
</tr>
<tr>
<th scope=””>usernameLinkedin</th>
<td id=”usernameLinkedin”></td>
</tr>
<tr>
<th scope=”row”>usernameInstagram</th>
<td id=”usernameInstagram”></td>
</tr>
<tr>
<th scope=”row”>summaryProfile</th>
<td id=”summaryProfile”></td>
</tr>
<tr>
<th scope=”row”>languageName1</th>
<td id=”languageName1″></td>
<th scope=”row”>languageLevel1</th>
<td id=”languageLevel1″></td>
</tr>
<tr>
<th scope=”row”>languageName2</th>
<td id=”languageName2″></td>
<th scope=”row”>languageLevel2</th>
<td id=”languageLevel2″></td>
</tr>
<tr>
<th scope=”row”>hobby1</th>
<td id=”hobby1″></td>
<th scope=”row”>hobby2</th>
<td id=”hobby2″></td>
<th scope=”row”>hobby3</th>
<td id=”hobby3″></td>
<th scope=”row”>hobby4</th>

<td id=”hobby4″></td>
</tr>
</tbody>
</table>
</div>

<script>
const userObj = JSON.parse(window.localStorage.getItem(“userData”));

console.log(“userObj”, userObj);

document.getElementById(“myPhoto”).innerHTML = userObj.myPhoto;
document.getElementById(“fullName”).innerHTML = userObj.fullName;
document.getElementById(“gender”).innerHTML = userObj.gender;
document.getElementById(“bornPlace”).innerHTML = userObj.bornPlace;
document.getElementById(“birthday”).innerHTML = userObj.birthday;
document.getElementById(“address”).innerHTML = userObj.address;
document.getElementById(“phone”).innerHTML = userObj.phone;
document.getElementById(“email”).innerHTML = userObj.email;
document.getElementById(“urlFB”).innerHTML = userObj.urlFB;
document.getElementById(“urlGithub”).innerHTML = userObj.urlGithub;
document.getElementById(“urlLinkedin”).innerHTML = userObj.urlLinkedin;
document.getElementById(“urlInstagram”).innerHTML = userObj.urlInstagram;
document.getElementById(“summaryProfile”).innerHTML =
userObj.summaryProfile;

document.getElementById(“languageName1”).innerHTML =
userObj.languageName1;
document.getElementById(“languageLevel1”).innerHTML =
userObj.languageLevel1;
document.getElementById(“languageName2”).innerHTML =
userObj.languageName2;
document.getElementById(“languageLevel2”).innerHTML =
userObj.languageLevel2;

document.getElementById(“hobby1”).innerHTML = userObj.hobby1;
document.getElementById(“hobby2”).innerHTML = userObj.hobby2;
document.getElementById(“hobby3”).innerHTML = userObj.hobby3;
document.getElementById(“hobby4”).innerHTML = userObj.hobby4;
</script>
</body>
</html>
“`

result for CV_result.html
[upl-image-preview url=https://www.webdeveloper.com/assets/files/2020-05-12/1589244346-214430-capture.png]

Also in #JavaScript _↴