Comments (21)
  • Add a Comment
  • Edit
  • More Actions v
  • Quarantine this Entry

1 PeterYim commented Permalink

This is a very cool technique. now the binary src is stored as base64 and read directly by the browser. The performance on your working example clearly shows the advantage of doing it this way. Thanks for sharing, Bob!

2 bobleah commented Permalink

@ Peter - Thanks Peter! It would be interesting to create a full web page with its artifacts stored in localStorage and measure the performance differences.

3 MattBerglund commented Permalink

Nice Bob! Interesting to think about all the applications for localStorage...

4 bobleah commented Permalink

@ Matt - Thanks! This technique does open up a number of interesting possibilities!

5 David_Salinas commented Permalink

To quote Joker from Batman (1989), "Where does he get those wonderful toys? " : ) <div>&nbsp;</div> Seriously, you keep finding all of these great nuggests of tricks. <br /> As you know, the dW site uses Akamai to help the site with regional caching to mainly help the response time for our local site audience. <div>&nbsp;</div> It would be interesting to see how this method could be applied strategically at dW to improve our response times. <br /> Specifically, what kind of delta response time improvements will we see with both akamai and local storage. <div>&nbsp;</div> Want to test it out? <br />

6 bobleah commented Permalink

@ David - this would be interesting... I would like to see statically localStorage compared to Akamai. Let's test it!

7 CJS commented Permalink

Coolness, as always, enjoyed reading this one......

8 bobleah commented Permalink

Thanks CJ! I bet we can do something really creative with this technique! :-)

9 Shin-LaC commented Permalink

Excuse me, but isn't this exactly what the browser cache does automatically? Your example works poorly because the server explicitly tells the user agent not to use the cache for that image: <div>&nbsp;</div> $ curl -I 'https://www.ibm.com/developerworks/mydeveloperworks/blogs/bobleah/resource/hero.jpg' <br /> [...] <br /> Expires: Thu, 01 Dec 1994 16:00:00 GMT <br /> Cache-Control: public, must-revalidate, max-age=5, no-cache=set-cookie <br /> [...] <div>&nbsp;</div> If you allowed caching, like servers usually do, then I doubt we would see any difference in performance, because the browser would be loading the image from disk in both cases.

10 bobleah commented Permalink

@ Shin-La - You are absolutely correct in pointing out that once an artifact is in cache, regardless of the implementation of how it was cached, will yield similar performance results. The key difference between between localStorage cached artifacts vs. browser cached artifacts is in the level of intelligence, fidelity, and most important, the point of control of the cache itself, I.E. application vs. client. I have made an update to this blog entry to ensure this point is clear. Thanks!

11 richb commented Permalink

Maybe I'm missing the point here, but aren't you having to download the image in any case because it's base64-encoded into the page itself? So to avoid the delay in downloading, say, a 100kb image file you add 100kb (or more, since it's encoded?) to the html page itself? <div>&nbsp;</div> Shouldn't the script make an *additional* call to the server if the image is not cached in localstorage and load it from localstorage otherwise, rather than embedding the image itself anyway? If the page changes slightly and needs to be reloaded but the image hasn't changed it will effectively be needlessly downloading the image again anyway. <div>&nbsp;</div> I'm confused...

12 bobleah commented Permalink

@richb - Hi Rich - as pointed out by you and this blog entry, a layer of application intelligence is required. The realization of page performance is derived by the number, size, and complexity of the stored elements, and in the exercise of intelligent control the server application has on these elements. The script illustrates how to store and retrieve an artifact, with focus on what is typically a binary artifact. To add the first layer of intelligence could be as simple as an AJAX request to retrieve the base64 Image or a large javascript file to store and retrieve. Additional intelligence could include associating a SHA hash with locally stored elements, to exercise a form of intelligent version control of stored artifacts.

13 CezaryTomczyk commented Permalink

This technique doesn't work when javascript is off or not available. I mean img without url in src attribute will not show image. I think that use of "expires" header working well because the file is stored in browser cache until expire date is valid. There is no extra request to server for file.

14 monia commented Permalink

Hi, <br /> I want to store an image with this technique (local Storage). So I should have the base64 encoded image. My problem that I should have an automatic process that encode an image in input. <br /> I explain: in my application, a citizen can take a picture, i want to store this picture locally so i should have the base64 code of each picture taked. <br /> The solution must be in javascript. <br /> Someone know what can i do? <div>&nbsp;</div> <div>&nbsp;</div>

15 bobleah commented Permalink

@ monia - I have not personally done this, but a quick Google search revealed a number of examples that may work for you. This looked interesting: http://www.webtoolkit.info/javascript-base64.html

16 monia commented Permalink

I see it. This example encode a text not an image. I'd like to encode an image not a field text

17 MaurisourceAgenceweb commented Permalink

Great technique, but I wonder how to apply this technique without the user having to scroll down the page so that the content starts appearing. I don't know how it actually can increase my homepage loading time there. Thanks for sharing. <div>&nbsp;</div> <b>John Pearson - <a href="http://www.maurisource.com/" rel="123">creation site web</a></b>

18 bobleah commented Permalink

@ MaurisourceAgenceweb - I recently implemented a localStorage method to intelligently store my blogs lead space image. I plan on authoring a blog post and sharing the code on how I did this in the near future. Stay tuned!

19 DilipBhatt commented Permalink

Hey Bob, I used this tip of yours in my blog to publish a front end standard. http://iskeleton.blogspot.in/

20 bobleah commented Permalink

@ DilipBhatt -- Super! Glad you found value in this post!

21 UB3T_Maxime_Buisson commented Permalink

The point is localStorage is limited to 5MB...