Javascript to change CSS Dynamically using HTML 5 Local Storage

Discussion in 'HTML & Website Design' started by dhruvd, Nov 3, 2012.

0
  1. #1
    Solved! View solution.
    dhruvd, Nov 3, 2012 IP
  2. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #2
    Forum and/or your copy/paste mangled your URL, though I assume you mean change-style-sheets.shtml

    converting it to local storage should be as simple as replacing the set_cookie and get_cookie function with the much simpler localStorage array.

    
var localStorageStyleName = "demo theme" ;

function switchStyle ( styleTitle ) {
	var linkList = document.getElementsByTagName("link");
	for ( var i=0; i<linkList.length; i++ ) {
		if (
			(linkList[i].rel.indexOf('stylesheet') != -1) &&
			(linkList[i].title)
		) {
			linkList[i].disabled = !(linkList[i].title == styleTitle);
		}
		localStorage[localStorageStyleName] = styleTitle;
	}
}

function onloadHandler() {
	if (localStorage[localStorageStyleName]) {
		switchStyle( localStorage[localStorageStyleName] );
	}
}
    Code (markup):
    I think should do it. Just remember you might want to provide cookie support as a fallback, and naturally don't forget to include scripting off fallbacks to handle/track this server side, at which point why throw javascript at this in the first place?

    Side note, always laugh at the outright bad coding in most such tutorials. Extra variables and functions for nothing, late var creation, unclear var creation, naming conventions that don't match the languages -- suppose it goes hand in hand with throwing javascript at something that really has little if any business being handled client-side.
     
    Last edited: Nov 3, 2012
    deathshadow, Nov 3, 2012 IP
    dhruvd likes this.
  3. dhruvd

    dhruvd Active Member

    Messages:
    420
    Likes Received:
    20
    Best Answers:
    0
    Trophy Points:
    60
    #3
    Hi death Shadow...Thanks soo much for your help.....it is working like a charm...! I am so grateful .

    Just one more thing if you dnt mind....how do i put cookie as a fall back machanism ? (Like we detect if browser supports local storage and if not then fall back to <body onload="Set_style_from_cookie()"> )
    so how do i switch between these two Onload calls ? (I am sorry...not the strongest with js)

    Regards
     
    dhruvd, Nov 4, 2012 IP
  4. dhruvd

    dhruvd Active Member

    Messages:
    420
    Likes Received:
    20
    Best Answers:
    0
    Trophy Points:
    60
    #4
    Hi, This is what is in my JS file :




    This is what i am trying to use.
     
    dhruvd, Nov 4, 2012 IP
  5. #5
    With a cookie fallback should localStorage be unavailable or blocked, it would go something like this:
    
var styleHandle = "demo_theme";

function getCookie( name ) {
	var prefix = name + '=';
	var begin = document.cookie.indexOf('; ' + prefix);
	if (begin == -1) {
		begin = document.cookie.indexOf( prefix );
		if (begin != 0) return null;
	} else begin += 2;
	var end = document.cookie.indexOf( ';' , begin );
	if (end == -1) end = document.cookie.length;
	return unescape( document.cookie.substring( begin + prefix.length , end ) );
}

function retrieveValue (name) {
	if (localStorage) {
		return localStorage[name];
	} else {
		return getCookie(name);
	}
}

function storeValue( name, value ) {
	if (localStorage) {
		localStorage[name]=value;
	} else {
		// no need to waste a function on something so simple as setting it
		document.cookie = 'name' + '=' + escape(value) + ' expires=2147483647';
	}
}

function switchStyle ( styleTitle ) {
	var linkList = document.getElementsByTagName("link");
	for ( var i=0; i<linkList.length; i++ ) {
		if (
			(linkList[i].rel.indexOf('stylesheet') != -1) &&
			(linkList[i].title)
		) {
			linkList[i].disabled = !(linkList[i].title == styleTitle);
		}
		storeValue( styleHandle , styleTitle );
	}
}

function onloadHandler() {
	var styleName = retrieveValue ( styleHandle );
	if (styleName) switchStyle( styleName );
}
    Code (markup):
    Couple simple function wrappers to test for it.

    Oh, and if you're curious on the cookie expiration time, that works out to 0x7FFFFFFF in hexidecimal, the highest unsigned 32 bit value -- aka the highest safe value for a cookie expiration on most system -- which works out to sometime in 2039. Thankfully most modern browsers have converted to 64 bit times -- but you never know... 27 years is SO far off... I bet that's what coders were saying in 1973 about Y2K... here it comes, Y2K39
     
    deathshadow, Nov 4, 2012 IP
  6. dhruvd

    dhruvd Active Member

    Messages:
    420
    Likes Received:
    20
    Best Answers:
    0
    Trophy Points:
    60
    #6
    works like a charm....just had to modify Switch_Style function a little bit....

    Thanks a million for all your help ! Much appreciated...
     
    dhruvd, Nov 4, 2012 IP