localStorage Script Caching With basket.js

Downloading JavaScript files halts rendering and downloading of other files, and therefore can add significant amounts of time to your website’s downloading speed. Adding your scripts into your footer and using script loaders can help, but a new project is looking to make things even faster by caching in localStorage.

JavaScript From localStorage?

If you’re a smart developer, you’ve probably been bringing your JavaScript libraries in from content delivery networks (CDN) like Google’s and Bing’s. This is great because if another developer linked to their library using the same CDN, then it’s already in their cache so they don’t need to go out and download it again.

So, why would we want to cache our script in localStorage? Bing and Google have shown that there are performance benefits to assets in localStorage compared to using the browser cache. localStorage is also noticeably faster than alternatives such as IndexedDB. It will only get faster, too, as browsers work on it and optimize it more and more. Finally, localStorage is growing in popularity in browsers and in a short time period will be widespread enough that you can nearly rely on it.

How Do I Start Using localStorage?

Addy Osmani has created a project on GitHub called basket.js. It is an experimental script loader that will load the script into and out of localStorage if it’s available. It’s very similar to many script loaders except that it utilizes localStorage. You can even use the add function to pre-cache a script without injecting it into the document to be executed.

For a full list of all the functions and everything that it can do, and to stay updated with the project, go to the basket.js GitHub page.

Finishing Up

So, should you use it? That’s for you to decide, but I can’t see a good reason not to. Obviously if you’re working on a content management system like WordPress where you aren’t in control of most of the script files, then this probably won’t work out, but you can definitely benefit from this library, or at least from this concept, if you create web apps that you and your team have full control of.

Will you use it? Tell me what you think of this in the comments below. Happy Coding.