Benutzer legt BackgroundImage fest. Shop Bild-URL in Cookie so lädt es auf nächsten Besuch

Question

ich auf einer Website arbeite:

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

Ich möchte der Benutzer die Background einstellen können. Ich habe dies bereits mit dem Popup-Menü in der unteren linken Ecke implementiert. Aber was ich will, ist für die Daten über die Benutzer Wahl des Hintergrundbildes gespeichert werden, so dass, wenn sie zurück auf die Website kommen oder zu einer anderen Seite auf der Website verschieben, lädt es das gleiche Hintergrundbild.

Ich habe in Java Cookies sehe auf der Webseite w3schools.com w3schools.com/js/js_cookies.asp

Ich habe am Beispiel aussehen, aber ich bin nicht sicher, wie das Cookie erhält die Background zu speichern anstatt einen Benutzernamen zu speichern.

Jede Hilfe würde sehr geschätzt werden. Danke

Answer 1

In den Klick-Handler für die Vorschaubilder in dem Hintergrundbild-Selektor Sie Dinge tun, wie folgt:

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

Wenn Sie ersetzen die mit einer Funktion:

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

und dann

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

Und dann, in einem onload Handler, tun Sie etwas wie dieses:

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

Sie wollen vielleicht mehr Verstand auf dem Cookie-Wert zu tun, obwohl die Überprüfung, haben Sie eine Liste der verfügbaren Hintergründe herum zu treten, so dass Sie nur überprüfen konnten, dass bg definiert ist und dass es in der Liste ist.

Vielleicht möchten Sie auch absolute URLs für Ihre Bilder verwenden, anstatt relative URLs, die es einfacher machen, Dinge zu verschieben.

Answer 2

Ich habe nie mit Cookies in Javascript gearbeitet, aber mit Blick auf die W3C-Prüfung, die Sie zur Verfügung gestellt, wäre es nicht in Ordnung, diese Technik zu verwenden und nur die URL anstelle des Benutzernamens speichern? Und dann setzen Sie die img: src oder Hintergrund-URL oder was immer Sie verwenden, um diese URL von der getCookie-Funktion? (oder später, wenn das Dom bereit ist).

Eine Alternative könnte die Verwendung von lokalem Speicher sein, aber es könnte für das, was Sie versuchen, zu viel werden.