Como armazenar lado do cliente de dados persistentes

Question

Eu preciso armazenar programaticamente dados no lado do cliente sem ter que transferir os dados a partir do servidor em cada carregamento da página. Eu considerei gerando um arquivo JavaScript dinâmica com os dados necessários para a sessão atual do usuário e verifique se ele é armazenado em cache, mas que parece realmente confuso e existem algumas desvantagens que posso pensar para tal abordagem.

Como posso ir sobre o armazenamento de dados persistentes no lado do cliente?

Answer 1

Você pode armazenar dados em window.name, que pode armazenar até 2MB de dados (!).

/* on page 1 */
window.name = "Bla bla bla";

/* on page 2 */
alert(window.name); // alerts "Bla bla bla"

Editar: Também dê uma olhada em este artigo Ajaxian em relação a este.

Note que outros sites no mesmo separador / janela também tem acesso a window.name, então você não deve armazenar qualquer coisa confidencial aqui.

Answer 2

Você pode usar o Web Storage API ( Window.localStorage ou Window.sessionStorage ). Confira este artigo em html5doctor para uma explicação mais aprofundada. A API Web armazenamento é suportado por todos os navegadores modernos neste momento.

A propriedade localStorage somente leitura permite que você acesse um objeto de armazenamento para a origem do documento; os dados armazenados é gravado entre sessões do navegador . localStorage é semelhante ao sessionStorage, exceto que, enquanto os dados armazenados no localStorage não tem tempo de expiração, dados armazenados em sessionStorage fica limpo quando a sessão termina página -. isto é, quando a página é fechada
^{https://developer.mozilla.org/en/docs/ web / API / Janela / localStorage}

Como destacado acima:

• Para armazenar os dados indefinidamente (até que o cache é limpo), use Window.localStorage .
• Para armazenar os dados até que a janela é fechada, o uso Window.sessionStorage .

Existem dois métodos para definir e obter propriedades através do Window.localStorage e Window.sessionStorage API de:

1. Acesse as propriedades diretamente:

   localStorage.name = 'ashes999';
   console.log(localStorage.name); // ashes999
   delete localStorage.name;
   console.log(localStorage.name); // undefined
   

   sessionStorage.name = 'ashes999';
   console.log(sessionStorage.name); // ashes999
   delete sessionStorage.name;
   console.log(sessionStorage.name); // undefined
   

2. Use a Storage.setItem , < a href = "https://developer.mozilla.org/en-US/docs/Web/API/Storage/getItem" rel = "noreferrer"> Storage.getItem , e Storage.removeItem métodos API.

   localStorage.setItem('name', 'ashes999');
   console.log(localStorage.getItem('name')); // ashes999
   localStorage.removeItem('name');
   console.log(localStorage.getItem('name')); // undefined
   

   sessionStorage.setItem('name', 'ashes999');
   console.log(sessionStorage.getItem('name')); // ashes999
   sessionStorage.removeItem('name');
   console.log(sessionStorage.getItem('name')); // undefined
   

Advertências:

• Os navegadores podem impor limitações à capacidade de armazenamento por origem do Web Armazenamento API , mas você deve estar-se seguro para 5MB.
• A API de armazenamento na Web é limitado pela política de mesma origem.
• Acesso à Web Armazenamento de IFrames de terceiros é negado se o usuário tem deficiência cookies de terceiros no Firefox

Answer 3

Se que você realmente precisa fazer isso (e eu definitivamente tenho dúvidas de que é uma boa idéia em tudo), a sua ideia de arquivos javascript adicional não é tão ruim quanto você pensa. Basta usar a notação JSON para manter os dados e é muito fácil de carregar e descarregar, conforme necessário. Caso você tenha em algumas divisões lógicas-bem pensado você deve ser capaz de atualizar partes apenas de que sob demanda, também.

Answer 4

O que sobre o Google Gears. É feito para o armazenamento off-line, mas eu acho que poderia funcionar. http://code.google.com/apis/gears/design.html

A partir da documentação:

Usuário de Armazenamento de Dados

Os aplicativos que são mais do que apenas arquivos estáticos tem dados que são normalmente armazenados no servidor. Para o aplicativo para estar offline útil, esses dados devem estar acessíveis localmente. O módulo de banco de dados fornece uma base de dados relacional para o armazenamento de dados. Na página Architecture você vai encontrar uma discussão de estratégias para projetar o armazenamento local que o seu necessidades de aplicação.

Quando um aplicativo off-line reconecta, você precisará sincronizar as alterações feitas no banco de dados local com o servidor. Lá são muitas abordagens diferentes para sincronização de dados, e não há abordagem perfeita único. o Arquitetura página descreve algumas estratégias para a sincronização.

Uma característica adicional das engrenagens banco de dados é Full-Text Search, fornecendo uma maneira rápida de procurar texto dentro de um arquivo de banco de dados. Leia o detalhes aqui.