Div在刷新頁面後保存顏色？

基本上它是一個div，點擊它後會改變顏色。Div在刷新頁面後保存顏色？

我想讓div在刷新頁面後保存它的顏色 - 我不認爲cookie是好主意，因爲它可以保存用戶pc上的顏色。

我需要使每個人訪問該網站的顏色相同。

下面的代碼...

<!DOCTYPE html> 
<html> 
    <head> 
    <meta charset="utf-8"> 
    <title>change</title> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> 
    <style> 
     .color { 
     width: 400px; 
     height: 400px; 
     background: black; 
     margin: auto auto; 
     } 
     .clicked { 
     background-color: red; 
     } 
    </style> 

    </head> 
    <body> 
    <div class="color" id="change" onclick="changeColor();"></div> 

    <script> 
     $('.color').click(function(){ 
     $(this).toggleClass('clicked'); 
     }); 
    </script> 


    </body> 
</html>

從哪裏開始？

來源

2015-08-27 spleen

在點擊後設置一個帶有該顏色代碼的cookie並在頁面加載後讀取 –

Cookie！或DOM存儲 –

請參閱本參考瞭解有關cookies的信息http://www.w3schools.com/js/js_cookies.asp –

非常簡單的JSON數據庫實例

我已經寫了一些代碼，使您將JSON文件中的背景色保存到服務器上。

從本質上講，JSON文件作爲一個簡單的數據庫（你可能不應該這樣實現，但對初學者來說很簡單，它足夠簡單）集中了數據，允許所有用戶看到相同的狀態。

這是你如何能做到這一點：

index.js：

$.getJSON("https://api.myjson.com/bins/4zzaa", function(data){ 
    if (data.clicked) { 
     $("#box").addClass("clicked"); 
    } 
    $("#box").addClass("loaded"); 
}) 
.fail(function(){ 
    //Handle JSON fetch error 
}); 

$('#box').click(function(){ 
    var isClicked = $(this).hasClass("clicked") ? false : true; 
    var str = JSON.stringify({clicked: isClicked}); 
    $.ajax({ 
     url:"https://api.myjson.com/bins/4zzaa", 
     type:"PUT", 
     data: str, 
     contentType:"application/json; charset=utf-8", 
     dataType:"json", 
     success: function(data, textStatus, jqXHR){ 
      $("#box").toggleClass("clicked"); 
     } 
    }) 
    .fail(function(){ 
     //Handle PUT error 
    }); 
});

https://api.myjson.com/bins/4zzaa：

{ 
    "clicked": "true" 
}

我認真建議對jquery.getJSON()和jQuery.ajax()做一些閱讀。這些對你來說是一個很好的起點。

Here's my fiddle - 請注意，當您使用它時，必須替換getJSON和ajax方法中的URL。

希望這會有所幫助！

來源

2015-08-27 09:34:32

這是真棒，完美的作品，我不知道如何謝謝你！ :) – spleen

很高興我可以幫助:) upvote並接受答案，這就是我所需要的所有感謝！ –

試試這個：刷新之前：

var color = "value"; 
localStorage.setItem("color", color);

刷新後：

var color = localStorage.getItem("color");

來源

2015-08-27 08:59:57

您可以通過設置cookie或localStorage的實現這一目標。我已經實現了使用localstorage的功能。嘗試在你的代碼，將工作

$(function(){ 
     if(localStorage.getItem("divClicked")){ 
      $('.color').addClass('clicked'); 
     } 
     else{ 
     localStorage.setItem("divClicked",false); 
     } 
    }); 

    $('.color').click(function(){ 
     localStorage.setItem("divClicked", !localStorage.getItem("divClicked")); 
     $(this).toggleClass('clicked'); 
    });

來源

2015-08-27 09:11:11

閱讀評論的答案 - 不幸的是，海報正在尋找一個*分散*持久解決方案 –

我希望海報只是要求保存每個用戶的div的狀態是否被點擊或不。我提供的解決方案是滿足需求 –

你好，謝謝你的答案，它的作品很棒，但不幸的是我需要將信息保存在數據庫中，我認爲，div需要爲每個用戶使用相同的顏色。 – spleen

它的更好，如果你使用的ID代替。顏色的。這裏是一個解決方案：

<!DOCTYPE html> 
<html> 
    <head> 
    <meta charset="utf-8"> 
    <title>change</title> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> 
    <style> 
     .color { 
     width: 400px; 
     height: 400px; 
     background: black; 
     margin: auto auto; 
     } 
     .clicked { 
     width: 400px; 
     height: 400px; 
     background-color: red; 
     margin: auto auto; 
     } 
    </style> 

    </head> 
    <body> 
    <div class="color" id="change" onclick="changeColor();"></div> 

    <script> 
     function changeColor(){ 
     $('#change').toggleClass('clicked'); 
     $('#change').toggleClass('color'); 
     if(typeof(Storage) !== "undefined") { 
      localStorage.setItem("color", $('#change').attr('class')); 
     } 
     } 

     $(document).ready(function(){ 

    if(typeof(Storage) !== "undefined" && localStorage.getItem("color") !='') { 
     $('#change').attr('class',''); 
     $('#change').attr('class', localStorage.getItem("color")); 
    } 
    }); 

    </script> 
    </body> 
</html>

來源

2015-08-27 09:14:57 ThreeSidedCoin

你應該將數據保存在服務器上，例如在數據庫或文件

來源

2015-08-27 09:28:07

Div在刷新頁面後保存顏色？

回答

相關問題