javascript - 如何让用户选择的背景图像持久

Question

我想让我的 Django webapp 上的用户选择一个背景图像，并让它在所有页面中保持不变。

我有办法让用户从列表中的仪表板/主页中选择他们想要的图像，但是一旦他们转到不同的页面或刷新它就会重置为默认的 css 背景图像

这是我的下拉列表

<select id="backgrounds">
    <option>Select a background</option>
    <option value="/static/images/traveling.jpg">Traveling</option>
    <option value="/static/images/Airplane.jpg">Airplane</option>
    <option value="/static/images/Beach.jpg">Beach</option>
    <option value="/static/images/Florence.jpg">Florence</option>
</select>

这是我用来修改css的javascript

$(document).ready(function () {
    var body = $(document.body);
    $('#backgrounds').bind('change', function (event) {
        var bg = $(this).val();
        console.log(bg);
        if (bg == null || typeof bg === 'undefined' || $.trim(bg) === '')
            body.css('background-image', '');
        else
            body.css('background-image', "url('" + bg + "')");
    });
});

我想不出保存设置并将其作为不同页面上的背景图像的最佳方法。任何帮助都会很棒，如果需要更多信息，请告诉我。

Answer 1

您可以使用 Ajax 将用户选择存储在数据库或 session 中。或者，更简单，您可以使用 localStorage 或 cookie，但它只保存在当前机器上。