Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 13 of 13
  1. #1
    Regular Coder
    Join Date
    Apr 2012
    Location
    St. Louis, MO
    Posts
    985
    Thanks
    7
    Thanked 101 Times in 101 Posts

    Experimenting with localStorage/sessionStorage - need advice, please

    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,
    Last edited by WolfShade; 03-05-2013 at 02:58 PM.
    ^_^

    If anyone knows of a website that can offer ColdFusion help that isn't controlled by neurotic, pedantic jerks* (stackoverflow.com), please PM me with a link.
    *
    The neurotic, pedantic jerks are not the owners; just the people who are in control of the "popularity contest".

  • #2
    Senior Coder Dormilich's Avatar
    Join Date
    Jan 2010
    Location
    Behind the Wall
    Posts
    3,133
    Thanks
    12
    Thanked 332 Times in 328 Posts
    when do you currently execute the CSS loading script?
    The computer is always right. The computer is always right. The computer is always right. Take it from someone who has programmed for over ten years: not once has the computational mechanism of the machine malfunctioned.
    André Behrens, NY Times Software Developer

  • #3
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,471
    Thanks
    0
    Thanked 634 Times in 624 Posts
    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.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #4
    Regular Coder
    Join Date
    Apr 2012
    Location
    St. Louis, MO
    Posts
    985
    Thanks
    7
    Thanked 101 Times in 101 Posts
    Quote Originally Posted by Dormilich View Post
    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.
    ^_^

    If anyone knows of a website that can offer ColdFusion help that isn't controlled by neurotic, pedantic jerks* (stackoverflow.com), please PM me with a link.
    *
    The neurotic, pedantic jerks are not the owners; just the people who are in control of the "popularity contest".

  • #5
    Regular Coder
    Join Date
    Apr 2012
    Location
    St. Louis, MO
    Posts
    985
    Thanks
    7
    Thanked 101 Times in 101 Posts
    Quote Originally Posted by felgall View Post
    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.
    Last edited by WolfShade; 03-05-2013 at 02:34 PM.
    ^_^

    If anyone knows of a website that can offer ColdFusion help that isn't controlled by neurotic, pedantic jerks* (stackoverflow.com), please PM me with a link.
    *
    The neurotic, pedantic jerks are not the owners; just the people who are in control of the "popularity contest".

  • #6
    Regular Coder
    Join Date
    Apr 2012
    Location
    St. Louis, MO
    Posts
    985
    Thanks
    7
    Thanked 101 Times in 101 Posts
    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("\'"));
    ^_^

    If anyone knows of a website that can offer ColdFusion help that isn't controlled by neurotic, pedantic jerks* (stackoverflow.com), please PM me with a link.
    *
    The neurotic, pedantic jerks are not the owners; just the people who are in control of the "popularity contest".

  • #7
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,184
    Thanks
    10
    Thanked 569 Times in 550 Posts
    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.
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/1/19) IE7:0.2, IE8:6.7, IE11:7.4, IE9:3.8, IE10:4.4, FF:18.3, CH:43.6, SF:7.8, MOBILE:27.5

  • #8
    Regular Coder
    Join Date
    Apr 2012
    Location
    St. Louis, MO
    Posts
    985
    Thanks
    7
    Thanked 101 Times in 101 Posts
    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.
    ^_^

    If anyone knows of a website that can offer ColdFusion help that isn't controlled by neurotic, pedantic jerks* (stackoverflow.com), please PM me with a link.
    *
    The neurotic, pedantic jerks are not the owners; just the people who are in control of the "popularity contest".

  • #9
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,184
    Thanks
    10
    Thanked 569 Times in 550 Posts
    Quote Originally Posted by WolfShade View Post
    So far, I'm quite thrilled with using sessionStorage for the CSS.
    Do you mind explaining why? What's the benefit?
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/1/19) IE7:0.2, IE8:6.7, IE11:7.4, IE9:3.8, IE10:4.4, FF:18.3, CH:43.6, SF:7.8, MOBILE:27.5

  • #10
    Regular Coder
    Join Date
    Mar 2006
    Posts
    725
    Thanks
    35
    Thanked 132 Times in 123 Posts
    There are good uses for Storage, both session and local,

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

  • #11
    Regular Coder
    Join Date
    Apr 2012
    Location
    St. Louis, MO
    Posts
    985
    Thanks
    7
    Thanked 101 Times in 101 Posts

    Exclamation

    @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.
    ^_^

    If anyone knows of a website that can offer ColdFusion help that isn't controlled by neurotic, pedantic jerks* (stackoverflow.com), please PM me with a link.
    *
    The neurotic, pedantic jerks are not the owners; just the people who are in control of the "popularity contest".

  • #12
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,184
    Thanks
    10
    Thanked 569 Times in 550 Posts
    Quote Originally Posted by WolfShade View Post
    @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.
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/1/19) IE7:0.2, IE8:6.7, IE11:7.4, IE9:3.8, IE10:4.4, FF:18.3, CH:43.6, SF:7.8, MOBILE:27.5

  • #13
    Regular Coder
    Join Date
    Apr 2012
    Location
    St. Louis, MO
    Posts
    985
    Thanks
    7
    Thanked 101 Times in 101 Posts
    Quote Originally Posted by rnd me View Post
    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.
    ^_^

    If anyone knows of a website that can offer ColdFusion help that isn't controlled by neurotic, pedantic jerks* (stackoverflow.com), please PM me with a link.
    *
    The neurotic, pedantic jerks are not the owners; just the people who are in control of the "popularity contest".


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •