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

如何将javascript变量带到下一页？

3 个答案: