Resolved Experimenting with localStorage/sessionStorage - need advice, please

WolfShade · 03-04-2013, 08:19 PM

Hello, everyone.

I'm experimenting with localStorage and sessionStorage, and just trying to get a good feel for them.

I know it's not practical (so please don't remind me.. I know..), but I've got a script that will take the local .css files, put them in sessionStorage (if they don't already exist, there), and uses them when the page loads.

Problem is: it isn't ready by the time the page loads. A refresh will work.. but that just doesn't feel right.

Currently, I'm checking for a sessionStorage variable called 'reload'; if it doesn't exist, create it and refresh the page. This kind of works, but, again, doesn't feel right.

Any suggestions/recommendations on how to get the sessionStorage CSS to load before the rest of the page?

Thank you,

Dormilich · 03-05-2013, 06:43 AM

when do you currently execute the CSS loading script?

felgall · 03-05-2013, 08:27 AM

Make sure that the <script> tag is in the <head> and that it doesn't specify async or defer so that it actually prevents the page from starting to render until after it finishes running.

Also make sure that the code in the script is set to run immediately and not to wait for the HTML to load.

WolfShade · 03-05-2013, 01:41 PM

Quote:

Originally Posted by Dormilich

when do you currently execute the CSS loading script?

I'm embarrassed to say that I'm using document.write, for this, but the script tags are within the head tags, after meta tags, before anything else.

WolfShade · 03-05-2013, 01:42 PM

Quote:

Originally Posted by felgall

Make sure that the <script> tag is in the <head> and that it doesn't specify async or defer so that it actually prevents the page from starting to render until after it finishes running.

Also make sure that the code in the script is set to run immediately and not to wait for the HTML to load.

Done, and done. It's not within jQuery ready, or anything. It should be loading before the rest of the HTML. I'll try to provide some code, but it means manually typing everything, as my dev system is isolated from the internet.

UPDATE: Okay.. I'm a liar.

When I answered, this morning, it was before I had a chance to look over the code, again. Turns out I was wanting to use jQuery $.get(), so (of course) my script came AFTER the src="jquery.min.js".

SOOOOOOO... I moved jQuery down to the bottom of the body, and wrote my own XHR for the AJaX request, set async to false, and viola! The first load of the page in a new browser is a fraction of a second longer than refreshes.

WolfShade · 03-05-2013, 02:57 PM

If anyone else is thinking of loading CSS into localStorage or sessionStorage, one piece of advice:

When loading the string into webStorage, split on ' and join on \' . Took me a few hours, yesterday, to figure this one out.

sStorage = windows.sessionStorage;
sStorage.setItem('thisCSS',str.split("'").join("\'"));

rnd me · 03-05-2013, 10:17 PM

it would be quicker to use the css file the first time, and a cached copy thereafter.
i would not use a sync ajax request in the head, that can cause your page to take forever to show up on a spotty connection.

also, localStrorage can take a while to init, pausing the page while it's parsed. This is especially noticeable on portable devices. You will get faster rendering with good http caching.

WolfShade · 03-05-2013, 10:23 PM

Our dev environment is usually a lot slower/bottlenecked than our production environment. The page is coming up almost instantly in dev. Granted, I'm only loading two .css files (one I made, and reveal.css for the reveal plugin), but I'll play with it some more, adding many large .css files to see what impact that will have.

So far, I'm quite thrilled with using sessionStorage for the CSS.

rnd me · 03-05-2013, 10:56 PM

Quote:

Originally Posted by WolfShade

So far, I'm quite thrilled with using sessionStorage for the CSS.

Do you mind explaining why? What's the benefit?

mrhoo · 03-06-2013, 12:42 AM

There are good uses for Storage, both session and local,

but saving, storing, reading and reproducing already cached files is not one of them.

WolfShade · 03-06-2013, 03:52 PM

@rnd me: I'm just exploring and experimenting with webStorage, and trying to push the limits, get a good feel for it. I really like what it's capable of, even if not practical. The fact that it has a large capacity (5-10Mb on most browsers, and if the FF user wants, he/she can increase or decrease that limit by going into about:config), can be disabled or enabled for cross-domain throughput, and can even store files (after base64 encoding) while remaining persistent (cleared, of course, if put in sessionStorage) like a cookie is wonderful. I'm just "kicking the tires".

@mrhoo: I know.. as I stated in my original post, I already know it's not practical.. just playing.

@Old Pedant: Really? REALLY? You have such a sense of self-loathing that you have to make yourself feel better by nit-picking a typographical error? I can't copy/paste from my dev system because it's isolated from the internet, forcing me to manually type example code. I MADE A F***ING MISTAKE! SORRY! DIDN'T MEAN TO OFFEND YOU! Do you have any friends? Or did you drive them all away with your incessant nit-picking of honest, miniscule errors? I'm so fed up with seeing responses from you to EVERYONE that are "BZZT! WRONG!", "BZZT! WRONG!!!", "BZZT! WRONG!!", that you have FINALLY nit-picked your way on to my ignore list.

rnd me · 03-06-2013, 05:34 PM

Quote:

Originally Posted by WolfShade

@rnd me: I'm just exploring and experimenting with webStorage, and trying to push the limits, get a good feel for it. I really like what it's capable of, even if not practical. The fact that it has a large capacity (5-10Mb on most browsers, .

actually, the limit is much lower. webkit uses UTC16, whereas most text needs only 8bits/char. This puts the limit at ~2.5mb in webkit, as does IE8+9. there is no way to increase the localStorage in firefox's about:config and chrome has said flat out that the quota is never going to be adjusted.

WolfShade · 03-06-2013, 05:45 PM

Quote:

Originally Posted by rnd me

actually, the limit is much lower. webkit uses UTC16, whereas most text needs only 8bits/char. This puts the limit at ~2.5mb in webkit, as does IE8+9. there is no way to increase the localStorage in firefox's about:config and chrome has said flat out that the quota is never going to be adjusted.

True, the UTC16 cuts the storage capacity in half, but I did test the about:config in FF. Went to a website that will test the limit, using the default value in about:config - it went to 50000000. I then changed the about:config in FF and retested, this time it went to 100000000. Granted, this was in FF12; maybe Mozilla changed their mind in a more recent version, but in FF12, I was able to successfully increase the storage space available.