爲樣式表切換器存儲js cookie

-1

我在允許多個文本大小的網站上遇到了一些問題。我有一個腳本，允許切換和所有偉大的工作，但它不存儲功能作爲一個cookie，所以如果用戶轉到其他頁面的文本大小的默認值。爲樣式表切換器存儲js cookie

我對JavaScript不太熟練，對cookies沒有任何線索 - 想知道是否有人可以幫助我。

在此先感謝。

這是我的腳本：

function loadjscssfile(filename, filetype) { 
    if (filetype == "js") { //if filename is a external JavaScript file 
     var fileref = document.createElement('script') 
     fileref.setAttribute("type", "text/javascript") 
     fileref.setAttribute("src", filename) 
    } else if (filetype == "css") { //if filename is an external CSS file 
     var fileref = document.createElement("link") 
     fileref.setAttribute("rel", "stylesheet") 
     fileref.setAttribute("type", "text/css") 
     fileref.setAttribute("href", filename) 
    } 
    if (typeof fileref != "undefined") document.getElementsByTagName("head")[0].appendChild(fileref) 
} 

function removejscssfile(filename, filetype) { 
    var targetelement = (filetype == "js") ? "script" : (filetype == "css") ? "link" : "none" //determine element type to create nodelist from 
    var targetattr = (filetype == "js") ? "src" : (filetype == "css") ? "href" : "none" //determine corresponding attribute to test for 
    var allsuspects = document.getElementsByTagName(targetelement) 
    for (var i = allsuspects.length; i >= 0; i--) { //search backwards within nodelist for matching elements to remove 
     if (allsuspects[i] && allsuspects[i].getAttribute(targetattr) != null && allsuspects[i].getAttribute(targetattr).indexOf(filename) != -1) allsuspects[i].parentNode.removeChild(allsuspects[i]) //remove element by calling parentNode.removeChild() 
    } 
}

按鈕代碼：

<a onClick="removejscssfile('/css/med-font.css', '/css/lrg-font.css', 'css');" href="javascript:loadjscssfile('/css/sml-font.css','css')" id="sml">A</a> 
<a onClick="removejscssfile('/css/sml-font.css', '/css/lrg-font.css', 'css');" href="javascript:loadjscssfile('/css/med-font.css','css')" id="med">A</a> 
<a onClick="removejscssfile('/css/med-font.css', '/css/sml-font.css', 'css');" href="javascript:loadjscssfile('/css/lrg-font.css','css')" id="lrg">A</a>

來源

2012-07-27 kala233

你在Chrome本地開發？ Chrome不支持（或不支持）出於任何原因在本地創建的Cookie。試試不同的瀏覽器，看看是不是這個問題 – Andy 2012-07-27 11:35:17

爲什麼不把所需的參數存儲爲cookies？我是否正確，想要將完整的JavaScript代碼存儲在cookie中？ – 2012-07-27 11:37:02

我會誠實地說我沒有關於javascript cookies的線索......基本上我有三個按鈕，當用戶點擊一個這個調用函數來刪除舊的樣式表並應用新的樣式表時。我現在將添加我的按鈕代碼。我需要能夠存儲在用戶訪問過程中選擇的任何樣式表。 – kala233 2012-07-27 12:08:54

此頁面保存最後選擇的樣式表的文件名和保存到一個cookie。加載時，頁面會檢查cookie是否存在，並相應地更改樣式表。

該內容包含在一個包裝中，因此樣式在加載時發生更改並且noscript標籤在那裏以確保沒有啓用JavaScript的人員仍然可以看到該頁面，因此瀏覽器內容沒有明顯變化。

感謝W3Schools的對cookie的代碼，同時也該因此從Sameera Thilakasiri回答：adding/removing css Files using JQUERY（雖然我堅持到這裏原生JS）

警告：在所有瀏覽器沒有測試和腳本可能應該舉行一旦頁面完全加載，就會離開頁面並啓動。

希望這會有所幫助！

<html> 
<head> 
    <link id="docStyleSheets" rel="stylesheet" href="default.css" type="text/css"> 
</head> 
<body> 
<noscript> 
    <div id="divContentWrapper" style="display: none"> 
</noscript> 
<ul id="ulCssChanges"> 
    <li><a href="#small" onclick="setFontSize('small.css');return false;")>Small</a></li> 
    <li><a href="#medium" onclick="setFontSize('medium.css');return false;")>Medium</a></li> 
    <li><a href="#large" onclick="setFontSize('large.css');return false;")>Large</a></li> 
</ul> 
<noscript> 
    </div> 
</noscript> 

<script> 
    var Cookies = { 
     SetCookie: function (c_name, value, exdays) { 
      var exdate = new Date(); 
      exdate.setDate(exdate.getDate() + exdays); 
      var c_value = escape(value) + ((exdays == null) ? "" : "; expires=" + exdate.toUTCString()); 
      document.cookie = c_name + "=" + c_value; 
     }, 

     GetCookie: function (c_name) { 
      var i, x, y, ARRcookies = document.cookie.split(";"); 
      for (i = 0; i < ARRcookies.length; i++) { 
       x = ARRcookies[i].substr(0, ARRcookies[i].indexOf("=")); 
       y = ARRcookies[i].substr(ARRcookies[i].indexOf("=") + 1); 
       x = x.replace(/^\s+|\s+$/g, ""); 
       if (x == c_name) { 
        return unescape(y); 
       } 
      } 
     } 
    } 

    if (Cookies.GetCookie("fontSize") != "") { 
     setFontSize(Cookies.GetCookie("fontSize")); 
     if (document.getElementById("divContentWrapper") != null) { document.getElementById("divContentWrapper").style.display = "block"; } 
    } 

    function setFontSize(styleSheetName) { 
     document.getElementById("docStyleSheets").href = styleSheetName; 
     Cookies.SetCookie("fontSize", styleSheetName, 60); 
     return false; 
    }  
</script>

來源

2012-07-27 13:44:55 KevD

爲樣式表切換器存儲js cookie

回答

相關問題