Having stored our data in local storage, it is just as easy to read this data from a local storage. Here is a simple screen that takes a bank account number as an input, and reads its data when the number field is filled in:
Bank terminal screen
We clean up our code, making main() shorter by calling the methods:
void main() {
bind_elements();
attach_event_handlers();
}
bind_elements() {
owner = querySelector('#owner''),
balance = querySelector('#balance''),
number = querySelector('#number''),
btn_other = querySelector('#btn_other''),
error = querySelector('#error''),
}
attach_event_handlers() {
number.onInput.listen(readData);
btn_other.onClick.listen(clearData);
}Apply this refactoring from now on while coding a form. When the number is filled in, its input event listener is triggered:
number.onInput.listen(readData);
In the readData handler, the value is read from the local storage where the key contains the bank account number (line (2)). However, first, we will check whether our input sits in the local storage; if not, an error label will be shown. The field will get focus and we will leave the method with return (line (1) and following):
readData(Event e) {
// show data:
var key = 'Bankaccount:${number.value}'';
if (!window.localStorage.containsKey(key)) { (1)
error.innerHtml = "Unknown bank account!";
owner.innerHtml = "----------";
balance.innerHtml = "0.0";
number.focus();
return;
}
error.innerHtml = "";
// read data from local storage:
String acc_json = window.localStorage[key]; (2)
bac = new BankAccount.fromJson(JSON.decode(acc_json)); (3)
// show owner and balance:
owner.innerHtml = "<b>${bac.owner.name}</b>"; (4)
balance.innerHtml = "<b>${bac.balance.toStringAsFixed(2)}</b>";
}The bac bank account object is now created in line (3), the owner and balance labels can then be filled in line (4). Let's examine this in some detail. The resulting acc_json string has the structure of a map, and the JSON.decode method of the convert package transforms this string into a map. We will enhance our model classes with the functionality to convert this map into an object. The best way to do this is with a named constructor (called fromJson appropriately) that takes this map and makes a new object from it. So, in the person class, we add the following named constructor:
Person.fromJson(Map json) {
this.name = json["name"];
this.address = json["address"];
this.email = json["email"];
this.gender = json["gender"];
this.date_birth = DateTime.parse(json["birthdate"]);
}This is used by the fromJson constructor in the BankAccount class:
BankAccount.fromJson(Map json): date_created = DateTime.parse(json["creation_date"]) {
this.number = json["number"];
this.owner = new Person.fromJson(json["owner"]);
this.balance = json["balance"];
this.pin_code = json["pin_code"];
this.date_modified = DateTime.parse(json["modified_date"]);
}