хранения изменило цвет после обновления

Question

я пытаюсь изменить свою голову и цвета кнопка с помощью этого кода

<div class="ann-right"> 
    <button id="red" onclick="color1('#D91E18'), color2('#96281B')" class="tooltip color" title="Red"></button> 
    <button id="green" onclick="color1('#3FC380'), color2('#00B16A')" class="tooltip color"title="Green" ></button> 
    <button id="blue" onclick="color1('#5BBBFF'), color2('#22A7F0')" class="tooltip color" title="Blue"></button> 
    </div> 

    <script> 
    function color1(col){ 
    document.getElementById("head").style.backgroundColor=col; 
    } 

    function color2(col){ 
    document.getElementById("submit-search").style.backgroundColor=col; 
    document.getElementById("submit-post").style.backgroundColor=col; 
    } 
    </script> 

Как сохранить цвет после страницы обновилась?

Answer 1

Существует несколько вариантов реализации требуемого поведения, одним из которых является использование sessionStorage. Сохраните выбранный цвет в sessionStorgae и прочитайте его при загрузке страницы. Обратитесь к следующему для получения дополнительной информации:

// Save data to sessionStorage 
sessionStorage.setItem('key', 'value'); 

// Get saved data from sessionStorage 
var data = sessionStorage.getItem('key'); 

// Remove saved data from sessionStorage 
sessionStorage.removeItem('key'); 

// Remove all saved data from sessionStorage 
sessionStorage.clear(); 

Update: В вашем случае:

<div class="ann-right"> 
 
    <button id="red" onclick="color1('#D91E18'), color2('#96281B')" class="tooltip color" title="Red"></button> 
 
    <button id="green" onclick="color1('#3FC380'), color2('#00B16A')" class="tooltip color" title="Green"></button> 
 
    <button id="blue" onclick="color1('#5BBBFF'), color2('#22A7F0')" class="tooltip color" title="Blue"></button> 
 
</div> 
 

 
<script> 
 
    function color1(col) { 
 
    document.getElementById("head").style.backgroundColor = col; 
 
    sessionStorage.setItem('col1', col); 
 
    } 
 

 
    function color2(col) { 
 
    document.getElementById("submit-search").style.backgroundColor = col; 
 
    document.getElementById("submit-post").style.backgroundColor = col; 
 
    sessionStorage.setItem('col2', col); 
 
    } 
 

 
    color1(sessionStorage.getItem('col1')); 
 
    color2(sessionStorage.getItem('col2')); 
 
</script>