HTML5 Web Storage

O Web Storage, introduzido em HTML5, permite o armazenamento de até 10 MB no computador do cliente. Este armazenamento é baseado em pares de valores de chave, chaves e valores são armazenados como strings. Por exemplo, parseInt () seria necessário para recuperar um inteiro.

Existem três sabores diferentes de Web Storage, sessionStorage, globalStorage e localStorage.

sessionStorage: retém pares de valores-chave durante o tempo de vida de uma única guia.

globalStorage: agora obsoleto, não o use, use localStorage ao invés.

localStorage: persiste além da sessão atual.

Claro, para começar, verifique se o armazenamento está disponível na janela do cliente

function supportsLocalStorage()
{
    try
    {
        //local storage is an alias for window['localStorage']
        return ('localStorage' in window && window['localStorage'] !== null);
    }
    catch (e) { console.log(e.stack); }
    return false;
}

Os dois objetos de armazenamento da Web atuais, sessionStorage e localStorage, cada um tem os mesmos métodos e propriedades. Os mais úteis são:

-setItem: um método atribui um valor a uma chave, se a chave já existir, ele atualizará o valor.

function addData(key, data)
{
    //add data to new key, or replace value if the key already exists with new data
    try
    {
        //error isn't thrown in MSIE
        if (browser == "MSIE")
        {
            if (getRemainingSpace() - data.length < 0)
                return false;
        }

        //add the value to the key, equivalent to localStorage.setItem('key', 'value')
        localStorage[key] = data;
        return true;
    }
    catch (e)
    {
        console.log(e.stack);

        if (e.message == 'An attempt was made to add something to storage that exceeded the quota.')
        {
            //handle error, there is too much data
            console.log('too much data');
        }

        return false;
    }
}

-getItem: um método recupera uma chave do armazenamento, se o valor não existir, retorna indefinido.

function getData(key)
{
    //attempt to get the value from key value pair
    var data = localStorage[key];

    if (typeof data !== 'undefined')
    {
        //data exists
        console.log('localStorage[' + key + '] = ' + data); 
    }
    else
    {
        //cache returned null, image was not in the cache   
        console.log(key + ' is not a key contained within the local storage dictionary');
    }
}

-removeItem: um método para remover um par de valores-chave

function removeData(key)
{
    //remove data at a single key
    localStorage.removeItem(key);   
}

-clear: um método para remover todos os pares de valor-chave do armazenamento

function clearData()
{
    //clear all data
    localStorage.clear();   
}

-length: uma propriedade correspondente ao número de elementos em armazenamento.

function getLength()
{
    //return the number of items in local storage
    return localStorage.length;
}

-remainingSpace: uma propriedade, que só existe no IE, correspondente ao espaço que fica no cache, em Bytes. Para conseguir o mesmo em navegadores que não são MSIE, use o método JSON.stringify. O espaço de armazenamento disponível não é consistente entre os navegadores, consulte Web Storage Support Test para as restrições de tamanho do cache de cada navegador.

function getRemainingSpace()
{
    //return the number of bytes still available in localStorage
    if (browser == "MSIE")
        //only IE supports this function
        return localStorage.remainingSpace; 
    else
        //use info from Web Storage Support Test to get available bytes based on browser
        return available_bytes - JSON.stringify(localStorage).length;   
}

* nota: o Web Storage não funcionará no IE para o protocolo file: //.

Leitura adicional:

Armazenamento local – mergulhe no HTML5

Armazenamento local W3C

Testes de tamanho de armazenamento na web