IMPORTANT: Per accedir als fitxer de subversion: http://acacha.org/svn (sense password). Poc a poc s'aniran migrant els enllaços. Encara però funciona el subversion de la farga però no se sap fins quan... (usuari: prova i la paraula de pas 123456)

This W3C specification defines an API for persistent data storage of key-value pair data in Web clients.

La propiedad localStorage te permite acceder al objeto local Storage. localStorage es similar (comparteixen mateixa API) a sessionStorage. La única diferencia es que, mientras los datos almacenados en localStorage no tienen fecha de expiración, los datos almacenados en sessionStorage son eliminados cuando el la sesion de navegación finaliza - lo cual ocurre cuando el navegador es cerrado.

Al conjunt de les dues APIs també de l'anomena Web Storage (vegeu https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API)

Suport

Com podeu veure a:

http://caniuse.com/#search=localStorage

És una de les funcionalitats més suportades.

Ús

El objecte Window principal disposa d'un objecte anomenat localStorage

Tres sintaxis possibles per guardar un valor:

localStorage.colorSetting = '#a4509b';
localStorage['colorSetting'] = '#a4509b';
localStorage.setItem('colorSetting', '#a4509b');

Després tenim els mètodes getItem per obtenir el valor de l'storage local.

Resources:

Examples

Exemple amb Vue. Aplicació todos on els todos persisteixen

Podeu veure el codi a:

https://jsfiddle.net/yyx990803/4dr2fLb7/?utm_source=website&utm_medium=embed&utm_campaign=4dr2fLb7
https://github.com/vuejs/vue/blob/dev/examples/todomvc/js/store.js

nova versió:

var todoStorage = {
  fetch: function () {
    var todos = JSON.parse(localStorage.getItem(STORAGE_KEY) || '[]')
    todos.forEach(function (todo, index) {
      todo.id = index
    })
    todoStorage.uid = todos.length
    return todos
  },
  save: function (todos) {
    localStorage.setItem(STORAGE_KEY, JSON.stringify(todos))
  }
}

vantiga:

(function (exports) {

	'use strict';

	var STORAGE_KEY = 'todos-vuejs';

	exports.todoStorage = {
		fetch: function () {
			return JSON.parse(localStorage.getItem(STORAGE_KEY) || '[]');
		},
		save: function (todos) {
			localStorage.setItem(STORAGE_KEY, JSON.stringify(todos));
		}
	};

})(window);

Observeu com s'utilitza el patró Javascript Module Pattern per exportar un mòdul/objecte que serà l'encarregat de realitzar les operacions de Local Storage (fetch per obtenir els todos i save per a guardar-los). Com podeu veure per obtenir els todos només cal utilitzar getItem:

 var STORAGE_KEY = 'todos-vuejs';
 localStorage.getItem(STORAGE_KEY) || '[]'

I per a guardar-los utilitzar setItem:

localStorage.setItem(STORAGE_KEY, JSON.stringify(todos));

NOTA: Observeu com abans de guardar l'objecte el convertim a JSON amb la funció stringify

Per tal d'utilitzar aquest mòdul store només cal incloure'l o amb el mètode tracidional:

<script src="js/store.js"></script>

O si utilitzem Browserify o algun altre ainea com Webpack fer un require:

var Store = require('store.js');


Recursos:

https://github.com/vuejs/vue/tree/dev/examples/todomvc
http://todomvc.com/examples/vue/

IndexedDB

Vegeu IndexedDB

Vegeu també

Enllaços externs