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

Question

我正在開發一個有4個級別和主頁的遊戲。在主頁上，用戶通過選擇一個單選按鈕選擇4個圖像中的一個（本頁有4個圖像）。這個選定的圖像應該顯示在所有的水平（像你可以說的個人資料圖片）。但是當用戶在任何一個關卡中擊敗他時（他顯然應該能夠選擇新圖像），並且所選圖像將不再顯示。

Iam僅在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的（或餅乾），然後又看了一遍，當你想使用它。

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