Sunday, May 19, 2013

How to using HTML5 localStorage

Tag: ,




The HTML5 Web Storage standard was developed to allow sites to store larger amounts of data (like 5-10 MB) than was previously allowed by cookies (like 4KB). localStorage is awesome because it’s supported in all modern browsers (Chrome, Firefox 3.5+, Safari 4+, IE 8+, etc.).

The standard anticipated that sites might abuse this feature and advised that browsers limit the total amount of storage space that each origin could use. Quoting from the spec:
User agents should limit the total amount of space allowed for storage areas.

The current limits are:

2.5 MB per origin in Google Chrome
5 MB per origin in Mozilla Firefox and Opera
10 MB per origin in Internet Explorer
However, what if we get clever and make lots of subdomains like 1.website.com, 2.website.com, 3.website.com, and so on? Should each subdomain get 5MB of space? The standard says no. Quoting the spec, again:

User agents should guard against sites storing data under the origins other affiliated sites, e.g. storing up to the limit in a1.example.com, a2.example.com, a3.example.com, etc, circumventing the main example.com storage limit.

A mostly arbitrary limit of five megabytes per origin is recommended.

However, Chrome, Safari, and IE currently do not implement any such “affiliated site” storage limit. Thus, cleverly coded websites, like FillDisk.com, have effectively unlimited storage space on visitor’s computers.

Features:

Fills up the user’s hard disk on Chrome, Safari (iOS and desktop), and IE.
Fills up 1 GB every 16 seconds on my Macbook Pro Retina (with solid state drive)
Tested with Chrome 25, Safari 6, IE 10.
For 32-bit browsers, like Chrome, the entire browser may crash before the disk is filled.
Does not work on Firefox, since Firefox’s implementation of localStorage is smarter.
Includes a button to reclaim your disk space ;)



0 comments: