为样式表切换器存储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

回答

相关问题