JSFiddle - React, Tailwind, and code Playground
HTML
<button id="full-width">GO FULL WIDTH</button>
<button id="fixed-width">GO FIXED WIDTH</button>
<div class="state"></div>
JavaScript
$(document).ready(function () {
var fullWidth = function() {
// Debug for proof of concept, uncomment below.
$('body').css('backgroundColor', 'red');
$('.state').html('Default to full width. Now refresh the page.');
// $('head').append('<link rel="stylesheet" href="http://www.nitrografixx.com/2015/ladder/full-ladder.css" type="text/css" />');
},
fixedWidth = function() {
// Debug for proof of concept, uncomment below.
$('body').css('backgroundColor', 'green');
$('.state').html('Default to fixed width. Now refresh the page.');
// $('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();
}
});