Neue Farbe beibehalten, während der Benutzer online ist?

Question

Ich füge diese Zeile der Funktion onClick eines Links hinzu.

document.getElementById('a.'+id).style.color= '#414042';

Wenn ich diesen Link angeklickt haben Farbänderungen ist, aber ich brauche diese Farbe zu halten, wenn Benutzer online ist .While Nutzer online er immer neue Farbe nicht die alte Farbe .When Benutzer-Log sehen sollte - Nach dem Einloggen sollte er immer noch eine neue Farbe sehen, die er geändert hat. Wie kann ich das machen ? In meiner Javascript-Funktion.

Answer 1

Sie können sich an die Farbe in web storage erinnern. Von Ihrer Frage vermute ich, dass Sie localStorage möchten, aber wenn Sie möchten, dass es automatisch bereinigt wird, verwenden Sie stattdessen sessionStorage.

Speichern (vorausgesetzt, Sie dieses id -spezifische machen müssen):

localStorage.setItem("color." + id, theirColor); 

Erste (gleiche Annahme):

var theirColor = localStorage.getItem("color." + id) || defaultColor; 

entfernen, wenn Sie aus irgendeinem Grund zu haben (gleiche Annahme):

localStorage.removeItem("color." + id); 

---

Beispiel (live copy on jsFiddle   — leider Stapel Snippets keinen Gebrauch von Web-Speicher erlauben):

HTML:

<label>Pick a color: 
    <select id="color-select"> 
    <option value="red">Red</option> 
    <option value="blue">Blue</option> 
    <option value="yellow">Yellow</option> 
    <option value="green">Green</option> 
    </select> 
</label> 
<div id="target">This is the text</div> 

JavaScript:

(function() { 
    var color = localStorage.getItem("color") || "red"; 
    console.log("color = " + color); 
    applyColor(color); 
    $("#color-select").val(color).on("change", function() { 
    var newColor = $(this).val(); 
    console.log("newColor = " + newColor); 
    localStorage.setItem("color", newColor); 
     applyColor(newColor); 
    }); 
    function applyColor(color) { 
    // Not using jQuery because you mentioned .style.color, 
    // but the jQuery way would be $("#target").css("color", color); 
    $("#target")[0].style.color = color; 
    } 
})(); 

---

Original-Beispiel, das zu kompliziert gewesen sein mögen (live copy on jsFiddle   — leider Stapel Snippets keinen Gebrauch von Web-Speicher erlauben):

HTML:

<div>Pick a color:</div> 
<div class="colors"> 
    <div data-color="red"></div> 
    <div data-color="blue"></div> 
    <div data-color="yellow"></div> 
    <div data-color="green"></div> 
</div> 
<div>Your selected color is shown with a heavy outline.</div> 

CSS:

.colors div { 
    display: inline-block; 
    border: 4px solid transparent; 
    width: 40px; 
    height: 1em; 
} 

.colors div.selected { 
    border: 4px solid black; 
} 

[data-color=red] { 
    background-color: #d00; 
} 

[data-color=blue] { 
    background-color: #00d; 
} 

[data-color=yellow] { 
    background-color: #dd0; 
} 

[data-color=green] { 
    background-color: #0d0; 
} 

JavaScript:

(function() { 
    var color = localStorage.getItem("color") || "red"; 
    console.log("color = " + color); 
    $("[data-color='" + color + "']").addClass("selected"); 
    $(".colors").on("click", "[data-color]", function(e) { 
    var $this = $(this); 
    color = $this.attr("data-color"); 
    console.log("new color = " + color); 
    localStorage.setItem("color", color); 
    $(".selected").removeClass("selected"); 
    $this.addClass("selected"); 
    }); 
})();