This library was generated with Angular CLI version 8.0.x.
You can read how here
Store your component configurations effortlessly
This library contains an angular module
StoreModule that allows you to store values in the browser's
This mainly allows a configuration to be associated with a
component, with the component becoming statefull on the attributes considered.
The configuration becomes persistent in different routes, or even a complete reloading of the page.
Persistence of configuration
- To navigation, change of routes, change of module.
- When reloading the page.
- When the browser closes/opens.
LocalStored is a
decoratorto annotate a 'field' of a class.
This annotation tells him that the object stored in this variable will at the slightest change store in the browser's
At the next access, even after the page is reloaded, the value in the
localStoragewill be served.
SessionStored is also a
decoratorwith the same behavior as
LocalStored, but the value will only be persisted for the time of the session.
At the next access, as long as the session is active, the value in the
SessionStoragewill be served.
For help getting started with a new Angular app, check out the Angular CLI.
For existing apps, follow these steps to begin using
@hhangular/store in your Angular app.
You can use either the npm or yarn command-line tool to install the
Use whichever is appropriate for your project in the examples below.
# @hhangular/storenpm install @hhangular/store --save
# @hhangular/storeyarn add @hhangular/store
Just import the module
StoreModule and you can use the
You can do this in your
AppModule or in your
;;;;;// ================= IMPORT =================;
;;// ================= IMPORT =================;
The use of 'Decorator':
SessionStored is very simple.
In the following example, we'll set up a configuration object for a table,
which we would like, the columns displayed and the sorting of columns are backed up in the browser.
Whether the user changes route (
angular mechanism), reloads the page or even returns to the page after closing the browser.
In all these cases the user will find the table as he had left it. This beyond the session.
Of course we could save this on the server. But it's so much simpler like that.
In a component just annotate a class attribute as follows:
LocalStored or SessionStored
The difference between the two
- LocalStored : The object is stored in the browser beyond the session.
- SessionStored : The object is stored only for the time of the session. The time of the session depends on the setting of the server.
LocalStore takes two parameters, a version number and an optional identifier. See below.
config =config2 =
SessionStore, take zero or one argument, the identifier that is optional. See below.
Version management (LocalStored)
As you will have understood as soon as the object is changed, it will be stored in the browser.
Access to the attribute will serve the object stored in the browser.
But how do you make browser content obsolete, for example, add new values to the saved configuration.
In our example, we want to add now a persistent filter.
Problem is always the content of the browser that will now be used when accessing the object defined by the attribute
Even if you change the code, will still be the object from browser that will be served.
Unless you ask all users to empty the browser store...
To do this the
LocalStored has a version mechanism.
Changing, incremating more accurately, the version number of the configuration presented in the sources,
will make the configuration stored in the browser obsolete.
LocalStored has this mechanism.
SessionStored only persists for the time of the session, this is not relevant to him.
If in the previous example the table configuration is linked to the 'TestDecoratorComponent' component, we sometimes want to be able to share a configuration between several components.
!!Attention!! this mechanism is not adapted to make components communicate with each other.
In the application that presents the documentation, this mechanism is used to save the chosen page viewed by the user as he changes his language.
The 'path' is backed up at the time of
routing. When you change context by changing your
locale, you end up at the root of the site.
The main module will read the
path in the store via an attribute, and navigates to the right page.
The two classes are therefore no longer the same. One written in the browser and the other reads it.
To do this we can specify an
id on the decorator in addition to the
Note that the initial values must be the same because the first component that writes in the store will be right.
What works and what doesn't
Let's take a quick tour of what works, and what doesn't
This basically everything works except the modification of the object directly to the root and the change of the contents of a 'array' by its 'index'