javascript - 用户设置 BackgroundImage。将图片 url 存储在 cookie 中，以便下次访问时加载

Question

我在网站上工作:

http://tawfiq-aliyah.co.uk/epic/Site2/

我希望用户能够设置 BackgroundImage。我已经通过左下角的弹出菜单实现了这一点。但我想要的是存储有关用户选择背景图像的数据，以便当他们返回网站或移动到网站上的另一个页面时，它会加载相同的背景图像。

我在 w3schools.com 网站上查看了 java cookie w3schools.com/js/js_cookies.asp

我看过这个例子，但我不确定如何让 cookie 存储 backgroundImage 而不是存储用户名。

任何帮助将不胜感激。 谢谢

Answer 1

在背景图像选择器中缩略图的点击处理程序中，您可以执行如下操作:

onclick="main.style.backgroundImage='url(images/back3.jpg)'"

如果你用函数替换它:

onclick="setBackgroundImage('images/back3.jpg')"

然后

function setBackgroundImage(url) {
    main.style.backgroundImage = 'url(' + url + ')';
    setCookie('BG', url, 100);    // Or however many days you want.
}

然后，在 onload 处理程序中，执行如下操作:

var bg = getCookie('BG');
if(bg)
    main.style.backgroundImage = 'url(' + bg + ')';

虽然您可能想要对 cookie 值进行更多的健全性检查，但您有一个可用背景列表，因此您可以只检查是否定义了 bg 并且它在列表中。

此外，您可能希望为图像使用绝对 URL 而不是相对 URL，这样可以更轻松地移动内容。