jQuery.Storage – Utilizando localStorage cross-browser com cookie fallback

Nesta semana precisei salvar algumas informações do usuário no navegador, mas queria algo mais robusto do que o próprio cookie maledito que dá tanta dor de cabeça. Então numa conversa com meu amigo @wilkerlucio, fui informado sobre a possível utilização do localStorage. Prontamente corri ao google/github para procurar algum plugin jQuery sobre. Achei alguns, porém, testei um único e gostei muito.

O jQuery.Storage é um plugin jQuery para facilitar a utilização de localStorage com uma grande utilidade que é um fallback para cookies, caso o navegador ieca7- não tenha suporte ao localStorage. Mas, para que não fique confuso para algumas pessoas que nunca ouviram falar em localStorage ou fallback, vamos pensar um pouco, como diria nosso querido telecurso 2000. Pesquisando sobre o assunto, achei um post sobre HTML5 e local storage muito mais interessante que esse, mas que não fala sobre o plugin, onde o zeno rocha fala muito organizadamente sobre o que é o localStorage, sessionStorage e ainda tem uma tabelinha de compatibilidade entre navegadores.

Explicando

- LocalStorage não depende da sessão. Se você setar um dado no localStorage esse ficará automaticamente disponível para qualquer janela. Além disso, permanecerá disponível até que seja explicitamente deletada pelo programador do site ou pelo o usuário. Perceba, o usuário pode fechar sua janela, reiniciar seu computador, viajar para o Acre e voltar, mas os dados vão continuar lá. O mesmo acontece com o cookie, porém, o localStorage possui uma quantidade bem maior de armazenamento, não possui data de expiração e ainda não são transitados a cada requisição de página.

- Fallback a grosso modo é uma segunda, terceira, quarta (e por aí vai) opção de executar a mesma ação com quase sempre todas as características intactas, sem que para isso você precise fazer algum gambi“artifício técnico” a mais. No nosso caso, quando o plugin detecta que o navegador do usuário não possui suporte a localStorage, ele tenta salvar os dados em cookies.

Já falei demais, vamos ver a utilização do plugin. Vamos fazer uma todo-list, utilizando o plugin jQuery.Storage.

Demo

Código-fonte utilizado

jsFiddle: http://jsfiddle.net/jquerybr/6g2JH/3/
github: https://github.com/djalmaaraujo/jquery-todolist

Métodos básicos do plugin utilizados

/**
 * Guarda/salva um valor dentro
 * do ITEM em questão
 */
$.Storage.saveItem('item', 'valor');

/**
 * Traz/ler as informações do ITEM
 * em questão
 */
$.Storage.loadItem('item');

Você ainda poderia ter utilizado esses:

/**
 * Apaga uma referência completa
 * passando o nome do item guardado.
 */
$.Storage.deleteItem('nome_do_que_voce_guardou');

/**
 * Apaga todos os registros de localStorage
 * guardados no browser do usuário em questão
 */
$.Storage.deleteAll();

Código completo

JavaScript

/**
 * todoList @ djalmaaraujo [at] jquerybr
 *
 * Dependencies;
 *    - jquery library
 *    - jquery.Storage plugin
 *
 */
$(function() {
    todoContainer        = $('#todolist');
    todoInput                = todoContainer.find('.header input');
    todoPlaceHolder = 'Digite uma tarefa e aperte enter..';
    todoStorageKey    = 'todolistDB';

    TodoList = {
        handlers: function() {

            // Input handler
            todoInput.keydown(function(event) {
                if (event.keyCode == 13 && event.shiftKey == 0) {
                    TodoList.insert(function() {
                        TodoList.loadTasks();
                    });
                    todoInput.val('');
                    return false;
                }
            });

            // Remove task
            todoContainer.find('ul li a.mark-as-done').live('click', function() {
                var id = $(this).data('id');
                TodoList.delete(id, function() {
                    TodoList.loadTasks();
                });
            });
        },

        // Retrieve tasks from localStorage
        tasks: function() {
            return $.Storage.loadItem(todoStorageKey);
        },

        // Insert a task into localStorage
        insert: function(fn) {
            var message = todoInput.val();
            if ((message != '') && (message != todoPlaceHolder)) {
                var tasks = TodoList.tasks();
                if (!tasks) tasks = [];
                tasks.push({id: tasks.length+1, message: message});
                TodoList.save(tasks);
            }
            if (fn) fn();
        },

        // Delete a task from localStorage
        delete: function(id, fn) {
            var tasks            = TodoList.tasks();
            var newTasks    = [];
            if (tasks) {
                for (var i = 0; i < tasks.length; i++) {
                    if (tasks[i].id != id) {
                        newTasks.push(tasks[i]);
                    }
                }
                TodoList.save(newTasks);
            }
            if (fn) fn();
        },

        // Sage tasks into localStorage
        save: function(tasks) {
            $.Storage.saveItem(todoStorageKey, tasks);
        },

        // Retrieve tasks from localStorage and append them to html
        loadTasks: function() {
            todoContainer.find('ul').html('');
            var tasks = TodoList.tasks();
            if (tasks) {
                for (var i = 0; i < tasks.length; i++) {
                    TodoList.appendTask(tasks[i]);
                }
            }
        },

        // Append to html a new task
        appendTask: function(task) {
            html = '';
            html += '<li>';
            html += ' <a href="javascript:void(0);" data-id="' + task.id + '" class="mark-as-done">[Done]</a> ';
            html += ' <span class="task">';
            html += task.message;
            html +=     '    </span>';
            html +=     '</li>';
            todoContainer.find('ul').append(html);
        }
    };

    // Start up
    TodoList.handlers();
    TodoList.loadTasks();
});

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>todoList</title> 

        <!-- jquery.Storage plugin -->
        <script src="https://github.com/tarellel/jquery.Storage/raw/master/jquery.Storage.js" type="text/javascript"></script> 

    </head>
    <body>
        <div id="todolist">
            <div class="header">
                <h2>todoList</h2>
                <div class="form">
                    <input type="text" placeholder="Digite uma tarefa e aperte enter.." />
                </div>
            </div>
            <ul class="items">

            </ul>
        </div>
    </body>
</html>

Em breve tem mais,

abraços!

---

fallback, jquery, localstorage, plugin