LocalStorage or: what was yet to save

Slides about the state of WebStorage, IndexedDB and ServiceWorker in 2015. State. All these client-side technologies are mainly used for keeping any kind of state, caching and for performance improvements. They work reliably on the major platforms and devices.

The talk was held at the EnterJS conference in 2015:

http://www.enterjs.de/

Transcript

4. if (window.localStorage) { try { localStorage.setItem('key', 'value'); } catch(e) { if (e.name === 'QUOTA_EXCEEDED_ERR' || e.name === 'NS_ERROR_DOM_QUOTA_REACHED') { // quota error } else { // other error } } }
5. // cache for min. 2 minutes lscache.set('greeting', 'Hello World!', 2);
12. var cache = { time: new Date().getTime(), request: 'service/names/last-names', data: {...} };
28. // app.js - register ServiceWorker for anything below /resources if ('serviceWorker' in navigator) { navigator.serviceWorker.register('/serviceworker/sw.js', { scope: '/resources/' }).then(function(reg) { // registration worked }).catch(function(error) { // registration failed }); }; // sw.js - init cache with resources to be watched this.addEventListener('install', function(event) { event.waitUntil(caches.open('v1').then(function(cache) { return cache.addAll( '/resources/app.css', '/resources/images/malone.jpg', '/resources/images/stockton.jpg' ); })); }); // sw.js - listen for network requests and return data from cache, otherwise cache them this.addEventListener('fetch', function(event) { var response; var cachedResponse = caches.match(event.request).catch(function() { return fetch(event.request); }).then(function(response) { caches.open('v1').then(function(cache) { cache.put(event.request, response.clone()); }); return response; }) });