如何在此脚本中添加Cookie以缓存样式表更改
我需要为此脚本添加一个cookie，因此当您单击＃全角或＃固定宽度时，它会记住您下次访问时的视图
<button id="full-width">GO FULL WIDTH</button>
<button id="fixed-width">GO FIXED WIDTH</button>
$(document).ready(function () {
$("#full-width").click(function () {
$('head').append('<link rel="stylesheet" href="http://www.nitrografixx.com/2015/ladder/full-ladder.css" type="text/css" />');
});
$("#fixed-width").click(function () {
$('link[rel=stylesheet][href="http://www.nitrografixx.com/2015/ladder/full-ladder.css"]').remove();
});
});
我发现这个cookie已经在我的网站上用于另一个脚本，但我不知道如何为上面的脚本安装它。
function setCookie(name, value, days) {
if (days) {
var date = new Date();
date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
var expires = "; expires=" + date.toGMTString();
}
else var expires = "";
document.cookie = name + "=" + value + expires + "; path=/; domain=.myfantasyleague.com";
}
function getCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for (var i = 0; i < ca.length; i++) {
var c = ca[i];
while (c.charAt(0) == ' ') c = c.substring(1, c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
}
return null;
}
function deleteCookie(name) {
createCookie(name, "", -1);
}
我认为cookies对此有点矫枉过正，并不是真的需要。 如果您不需要因其他各种未说明的原因而使用Cookie，您可以使用localStorage完成此操作。
https://jsfiddle.net/4bqehjfc/3/
var fullWidth = function() {
$('head').append('<link rel="stylesheet" href="http://www.nitrografixx.com/2015/ladder/full-ladder.css" type="text/css" />');
},
fixedWidth = function() {
$('link[rel=stylesheet][href="http://www.nitrografixx.com/2015/ladder/full-ladder.css"]').remove();
};
$("#full-width").click(function () {
localStorage.setItem('width', 'full-width');
fullWidth();
});
$("#fixed-width").click(function () {
localStorage.setItem('width', 'fixed-width');
fixedWidth();
});
if (localStorage.getItem('width') == 'fixed-width') {
fixedWidth();
} else if (localStorage.getItem('width') == 'full-width') {
fullWidth();
}
重要的是： localStorage.setItem()和localStorage.getItem() 。
localStorage得到了很好的支持，并且为Cookies提供了一个很好的干净选择（出于某种目的），但也有其自身的局限性。 看这里。
一个重要的事情要注意的是，切换这样的样式表，你会闪烁的未经格式化的内容，而样式表被取出，这不是很好。 如果你有这个灵活性，你可以使用localstorage来附加一个CSS类并以这种方式改变样式。
考虑到这一点：
HTMLStyleElement.disabled
是一个布尔值，如果样式表被禁用，则返回true;否则返回false。
（来源）你可以做到以下几点：
<style id="first" disabled >@import url(/a.css);</style>
<style id="second" >@import url(/b.css);</style>
和代码：
$("#first-on").click(function () {
$("#second")[0].disabled = true;
$("#first")[0].disabled = false;
});
如果遇到localStorage的一些已知问题，下面的示例将使用您提供的cookie功能。
请注意，我们将避免在此处使用jQuery作为代码的初始部分，以努力减少/删除可能会遇到的初始Flash，如果有人将布局Cookie设置为全宽度。
我也升级了你的按钮:)
<!doctype html>
<html>
<head>
<title>Cookiesheet</title>
<script>
var layoutcookiename = 'layout_cookie'; //just in case you want to rename the cookie for your layout
var layoutcookiedays = 30; //how many days do you want the cookie to last for
var mycookiedomain = '.nitrografixx.com'; //add a period in front of your domain name here to include it for all subdomains
var layoutcookie = getCookie(layoutcookiename); //Get the stored cookie if any
//Assuming the default layout will be fixed width
var currentlayout = (layoutcookie === null || layoutcookie === 'fixed') ? 'fixed' : 'full';
//If default is to be full width, uncomment and use this if statement instead of the preceding line
//var currentlayout = (layoutcookie === null || layoutcookie === 'full') ? 'full' : 'fixed';
if (currentlayout === 'full') {
document.write('<link rel="stylesheet" href="http://www.nitrografixx.com/2015/ladder/full-ladder.css" type="text/css" />');
}
//We only need the function to get cookies up here
function getCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for (var i = 0; i < ca.length; i++) {
var c = ca[i];
while (c.charAt(0) == ' ') c = c.substring(1, c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
}
return null;
}
</script>
</head>
<body>
<!-- Dynamic button text for initial load -->
<button id="layout-switch"><script>if (currentlayout === 'fixed') { document.write('GO FULL WIDTH'); } else { document.write('GO FIXED WIDTH'); }</script></button>
<!-- The rest of the javascript that can occur on document ready -->
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
$(document).ready(function () {
$('#layout-switch').click(function () {
if (currentlayout === 'fixed') {
$('head').append('<link rel="stylesheet" href="http://www.nitrografixx.com/2015/ladder/full-ladder.css" type="text/css" />');
$(this).html('GO FIXED WIDTH');
currentlayout = 'full';
} else {
$('link[rel=stylesheet][href="http://www.nitrografixx.com/2015/ladder/full-ladder.css"]').remove();
$(this).html('GO FULL WIDTH');
currentlayout = 'fixed';
}
setCookie(layoutcookiename, currentlayout, layoutcookiedays);
});
});
function setCookie(name, value, days) {
if (days) {
var date = new Date();
date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
var expires = "; expires=" + date.toGMTString();
}
else var expires = "";
document.cookie = name + "=" + value + expires + "; path=/; domain=" + mycookiedomain;
}
function deleteCookie(name) {
createCookie(name, "", -1);
}
</script>
</body>
上一篇: How do i add a cookie to cache stylesheet change in this script
下一篇: repeat angular js