O API de proxy JavaScript fornece uma grande quantidade de “mágica” no JavaScript, permitindo que o senhor use qualquer objeto como uma espécie de alias que permite uma parede de validação, formatação e lançamento de erros. O senhor sabia que também pode usar a API de proxy como uma abstração para diferentes tipos de armazenamento? Seja ele sessionStorage, localStorageou IndexedDB, o senhor pode usar um proxy para tornar a API muito mais fácil de trabalhar!
Um uso muito básico do API de proxy é o seguinte:
/*
const proxy = new Proxy({}, {
get: (obj, prop) => { ... },
set: (obj, prop, value) => { ... },
// more props here
});
*/
// This basic proxy returns null instead of undefined if the
// property doesn't exist
const proxy = new Proxy({}, {
get: (obj, prop) => {
return prop in obj ? obj[prop] : null;
}
});
// proxy.whatever => null
O API localStorage é bastante fácil de usar, mas o emprego de um proxy nos permite usar a sintaxe de objeto familiar e, eventualmente, até mesmo trocar o tipo de armazenamento sem que nenhuma outra parte do seu código seja afetada.
function getStorage(storage, prefix) {
return new Proxy({}, {
set: (obj, prop, value) => {
// obj[prop] = value;
storage.setItem(`${prefix}.${prop}`, value);
},
get: (obj, prop) => {
// return obj[prop];
return storage.getItem(`${prefix}.${prop}`);
},
});
}
// Create an instance of the storage proxy
const userObject = getStorage(localStorage, "user");
// Set a value in localStorage
userObject.name = "David";
// Get the value from localStorage
const { name } = userObject;
Observação: o código acima é um exemplo muito simplista – o senhor também deve adicionar métodos para excluir o objeto, bem como try/catch para evitar erros de armazenamento!
O senhor poderia trocar localStorage por sessionStorage e haveria muito pouco efeito em seu código geral! Se o senhor usa armazenamento em seu aplicativo, provavelmente já está usando uma abstração, mas eu adoro a interação básica com objetos JavaScript.
E não sou o único que adora esse padrão. O depurador DevTools do Firefox usa esse padrão para abstrair a API IndexedDB para armazenar pontos de interrupção, guias e outras preferências!
