使用HTML和javascript在許多HTML頁面上顯示個人資料圖片

Question

我正在開發一個具有4個級別和主頁的游戲。 在主頁中，用戶通過選擇單選按鈕選擇4張圖像之一（此頁面上有4張圖像）。 所選的圖像應在所有級別上顯示（例如您可以說的個人資料圖片）。 但是，如果用戶在任何級別上都失敗了，那么他將登陸到主頁（顯然，他應該能夠選擇新圖像），並且所選圖像將不再顯示。

我只用HTML和javascript開發此游戲。 是否可以在HTML和javascript中進行？如果沒有，那么我知道php的基本知識，如果可以使用PHP實現。

<input type="radio" name="profile" value="boy1" style="margin-left:40px;" onclick="location.href = 'firsta.html';"> 
<img style="margin-left:25px;" src="boy01.png" width="200" height="200" />

<input type="radio" name="profile" value="boy2" style="margin-left:40px;" onclick="location.href = 'firsta.html';"> 
<img style="margin-left:25px;" src="boy02.png" width="200" height="200" />

<input type="radio" name="profile" value="girl1" style="margin-left:40px;" onclick="location.href = 'firsta.html';"> 
<img style="margin-left:25px;" src="girl01.png" width="200" height="200" />

<input type="radio" name="profile" value="girl2" style="margin-left:40px;" onclick="location.href = 'firsta.html';"> 
<img style="margin-left:25px;" src="girl02.png" width="200" height="200" />

Answer 1

您可以將所選圖像的文件名設置為localStorage（或cookie），然后在要使用它時再次讀取它。

<input type="radio" name="profile" value="boy1.png" style="margin-left:40px;" onclick="chooseProfile(this.value, 'firsta.html')"> 
<img style="margin-left:25px;" src="boy01.png" width="200" height="200" />

在您的Javascript中：

function chooseProfile(img, page) {
  localStorage.profilePic = img;
  location.href = page;
}

然后，當您想閱讀它時：

document.getElementById('profileImage').src = localStorage.profilePic;