Как перенести переменную javascript на следующую страницу?

Question

В моих кодах есть две кнопки, которые меняют изображение. (Все коды написаны в одном php-файле). Как взять src изображения и сохранить его в переменной javascript и перенести его на другую страницу?

HTML

<button onclick="red()">red</button> 
<button onclick="blue()">blue</button> 
<img id="color" src="green.png" /> 

Javascript

function blue() 
    { 
    document.getElementById(color).src="blue.png"; 
    } 

function red() 
    { 
    document.getElementById(color).src="red.png"; 
    } 

Answer 1

Просто используйте JavaScript localStorage API

Текущая страница:

function blue() 
{ 
    document.getElementById(color).src="blue.png"; 
    localStorage.setItem('new_image', 'blue.png');  //Add this 
} 

function red() 
{ 
    document.getElementById(color).src="red.png"; 
    localStorage.setItem('new_image', 'red.png');  //Add this 
} 

На следующей странице вы можете получить значение со следующим:

<script> 
var whatImage = localStorage.getItem('new_image'); 
alert(whatImage); 
</script> 

Answer 2

На первой странице добавьте этот код:

document.cookie = "image_src=" + src_of_the_image +";"; 

На второй странице, вы извлекаете этот путь:

var tmp = document.cookie; 
var name_len = "image_src=".length; 
var prev_img_src = tmp.substring(name_len); 

Обратите внимание, что это работает, когда есть один файл cookie. Чтобы получить более конкретный вид на то, как хранить &, извлеките несколько файлов cookie, отметьте this example.

Answer 3

Другой путь у вас есть использовать LocalStorage:

function blue(){ 
    localStorage.setItem("imagePath", "blue.png"); 
    document.getElementById(color).src="blue.png"; 
} 

function red(){ 
    localStorage.setItem("imagePath", "red.png") 
    document.getElementById(color).src="red.png"; 
} 

затем в другой странице найти изображение, которое вы хотите изменить, и:

img.src = localStorage.getItem("imagePath");