In this article we'll learn how to implement a system using the localstorage of your browser.
First, we'll use ES6 to create a class in javascript
This class has the atributes year, month, day, category, description and a value for expense.
class Expense {
constructor(year, month, day, category, description, value) {
this.year = year;
this.month = month;
this.day = day;
this.category = category;
this.description = description;
this.value = value;
}
validateData() {
for(let el in this ) {
if(this[el] == undefined || this[el] == '' || this[el] == null) {
//se for nulo vazio o indefinido
return false;
}
return true;
}
}
}The second step is to create a class that is a controller to manage the localstorage.
class ExpenseController {
constructor() {
let id = localStorage.getItem('id');
if (id === null) {
localStorage.setItem('id', 0);
}
}
getNextId() {
let currentId = localStorage.getItem('id');
return parseInt(currentId) + 1;
}
save(expense) {
let id = this.getNextId();
localStorage.setItem(id, JSON.stringify(expense));
localStorage.setItem('id', id);
}
recoverAll() {
let expenses = Array();
let id = localStorage.getItem('id');
for(let i = 1; i <= id; i++) {
let expense = JSON.parse(localStorage.getItem(i));
if(expense === null) {
continue;
}
expense.id = i;
expenses.push(despesa);
}
return expenses;
}
search(expense) {
let filteredExpenses = Array();
filteredExpenses = this.recoverAll();
if(expense.year != '') {
filteredExpenses = filteredExpenses.filter(d => d.year == expense.year);
}
if(expense.month != '') {
filteredExpenses = filteredExpenses.filter(d => d.month == expense.month);
}
if(expense.day != '') {
filteredExpenses = filteredExpenses.filter(d => d.day == expense.day);
}
if(despesa.tipo != '') {
filteredExpenses = filteredExpenses.filter(d => d.category == expense.category);
}
if(expense.description != '') {
filteredExpenses = filteredExpenses.filter(d => d.description == expense.description);
}
if(expense.value != '') {
filteredExpenses = filteredExpenses.filter(d => d.month == expense.month);
}
return filteredExpenses;
}
remove(id) {
localStorage.removeItem(id);
}
}Now we need an instance of controller
let controller = new ExpenseController();
This function bellow rester one expense, so you can edit it as you want.
function registerExpense() { let year = <?= $year ?>; let month = <?= $month ?>; let day = <?= $day ?>; let category = <?= $category ?>; let description = <?= $description ?>; let value = <?= $value ?>; let expense = new Expense(year, month, day, category, description, value);if(expense.validateData()) { controller.save(expense); <?php sc_alert("localstorage saved"); ?> year = ''; month = ''; day = ''; category = ''; description = ''; value = '';
} else { //error <?php sc_error_message() ?> }}This function loads a list of expenses.
function loadExpensesList(expenses = Array(), filter = false) {
if (expenses.length == 0 && filter == false) { expenses = controller.recoverAll(); }
let expensesList = document.getElementById('listaDespesas'); expensesList.innerHTML = '';
expenses.forEach(function(d) {
let row = expensesList.insertRow();
//Coluna mais a esquerda. row.insertCell(0).innerHTML = `${d.day}/${d.month}/${d.year}`;
switch (d.category) {
case '1': d.category = 'Alimentação'; break; case '2': d.category = 'Educação'; break; case '3': d.category = 'Lazer'; break; case '4': d.category = 'Saúde'; break; case '5': d.category = 'Transporte'; break;
}
row.insertCell(1).innerHTML = d.category; row.insertCell(2).innerHTML = d.description; row.insertCell(3).innerHTML = d.value; let btn = document.createElement("button"); btn.className = 'btn btn-danger'; btn.innerHTML = '<i class="fa fa-times"></i>'; btn.id = `id_despesa_${d.id}`; btn.onclick = function() {
let id = this.id.replace('id_despesa_', ''); controller.remove(id); window.location.reload();
} linha.insertCell(4).append(btn);
})
}This function searches an expense.
function searchExpense() {
let year = document.getElementById('ano').value; let month = document.getElementById('mes').value; let day = document.getElementById('dia').value; let category = document.getElementById('tipo').value; let description = document.getElementById('descricao').value; let value = document.getElementById('valor').value;
let expense = new Expense(year, month, day, category, description, value); let expenses = controller.search(expense);
loadExpensesList(expenses, true);
}This is the base code example to use localstorage in your scriptcase.
You can use the code in the events of each application.