20Fingers2Brains: HTML 5 Local Storage best practices with demo

The Local storage in HTML5 is used to store data on client side.
The Local storage stores the saved data on a user's computer even after closing the browser window.
We need to be careful while using Local storage, as it could slow down your site.
In this article we will see how not to use Local storage.

Following points we need to consider while using local storage

Do not serialize unnecessarily
Do not use excessive keys
Do not use excessive gets/sets
Do not block the UI
Do not assume local storage will always work
Do not use key names that collide

Do not serialize unnecessarily

Before

        function store(key, val) {
            localStorage.setItem(key, JSON.stringify(val));
        }
            store('num', 1);
            store('on', true);
            store('name', 'HTML5');

After

        function store(key, val) {
          localStorage.setItem(key, val);
        }
        store('num', '1');
        store('on', 'true');
        store('name', 'HTML5');

Use the string where possible avoiding serializing most of the time.

Do not use excessive keys
Before

        localStorage.setItem('first', 'HTML5');
        localStorage.setItem('middle', 'Storage');
        localStorage.setItem('last', 'Local Storage');

After

        localStorage.setItem('name', 'Local Storage');

Always avoid creating multiple keys when you can have single for multiple data.

Do not use excessive gets/sets
Before

        $('input[type="checkbox"]').click(function() {
          localStorage.setItem($(this).attr('name'), $(this).is(':checked'));
        });

After

        window.onunload = function() {
          $('input[type="checkbox"]').each(function() {
            localStorage.setItem($(this).attr('name'), $(this).is(':checked'));
          });
        };

Do cache data in local memory or the DOM, and only get/set on window load/unload.

Do not block the UI
Before

        <head>
        <script>
            $('#name').html(localStorage.getItem('name'));
        </script>
        </head>

After

        <html>
        <body></body>
        <script>
            window.onload = function () {
                $('#name').html(localStorage.getItem('name'));
            };
        </script>
        </html>

Do defer or avoid using localStorage until onload.

Before

        $('button').click(function() {
          var name = localStorage.getItem('name');
          $('#name').html(name);
        });

After

        $('button').click(function() {
          window.setTimeout(function() {
            var name = localStorage.getItem('name');
            $('#name').html(name);
          }, 10);
        });

Do use setTimeout to defer localStorage access.

Before

        $('textarea').keydown(function() {
          localStorage.setItem('text', $(this).text());
        });

After

        $('textarea').keydown(function() {
          $.debounce(250, function() {
            localStorage.setItem('text', $(this).text());
          });
        });

Do not assume local storage will always work
Bad

        localStorage.setItem('Hello', 'World');

Better

        if (window.localStorage) {
          localStorage.setItem('Hello', 'World');
        }

Best

        if (window.localStorage) {
          try {
            localStorage.setItem('Hello', 'World');
          } catch(e) {
            if (e.name === 'QUOTA_EXCEEDED_ERR' || e.name === 'NS_ERROR_DOM_QUOTA_REACHED') {
            } else {
            }
          }
        }

Do check for feature support, writeable, and quota.

Do not use keys that collide
Before

        localStorage.setItem('name', 'HTML5');

After

        localStorage.setItem('first-name', 'HTML5');

Do use highly descriptive keys and avoid using keys that collide.

Saturday 22 March 2014

HTML 5 Local Storage best practices with demo

No comments:

Post a Comment