Build Effective Web Application

🔥With type-collector package 🔥

🔭 In this tutorial we will learn how to build effective single page application And how to use type-collector package in Angular 7

Before we start

Web Storage Overview | Web Fundamentals | Google Developers

🔌 Installations:

• Nodejs
• Angular Cli

What is type-collector ❓

type-collector is a fast, simple (and rich), zero-configuration node package that manage effective browser application storage for Typescript. Web Storage can only store strings. This factory module let you handle Object, Array and other types to be stored in and retrieved from them in Local Storage, Session Storage and Cookies.

type-collector

See documents here

type-collector with Angular 7

$ npm install -g @angular/cli

Generate new angular application

$ ng new angular-type-collector
$ cd angular-type-collector

Install type-collector package from:

$ npm i --save type-collector

Alternative

$ yarn add type-collector

Storage:

Let’s make something with Storage,

• Generate Post Module, Post Service ,Component Post and Post Model.

$ ng g m post
$ ng g c post
$ ng g i post
$ ng g s post/post

• Open post.ts and type

• Open post.module and Import HttpClientModule

• Open post.service.ts and Type

• Open app.module.ts and Import PostModule

Storage — Add

Change your app.component.ts to:

We get posts array from jsonplaceholder and add id and body into local storage.

Storage — Get

Let’s get some posts from local storage

let storage = TypeCollector.Factory.Storage;
storage.get(100).then(res =>{
console.log(res);
   //cupiditate quo est a modi....
})

Storage — Remove

Will remove value by id

storage.remove(100);

Storage — Remove All

Will clean the local storage from browser

storage.removeAll()

LocalStorag vs SessionStorage vs Cookie

What is the difference between sessionstorage, localstorage and Cookies?

Storage, Sessions & Cookies Objects

In this example I’ll show you how to store and retrieve Object in Web Storage With type-collector.

• Let’s Create User Interface

• Init User model and Factories

• Add user object in storage, session and cookie

Local Storage

Session Storage

Cookies

• Retrieve Object

🍺Cheers! 🍺