AUTHENTICATION USING JAVASCRIPT “localStorage” PROPERTY
First thing first about any standard application aimed to be built, what one needs consider should be authenticating users and making use of his records throughout his application till such user logout. Meaning when “Mr. A” login to his application, he should only see things pertaining to him and not things pertaining to “Mr. B” while access to the main application via their login details, writing code that authenticates users might be a little bit tedious/hard for beginners but JavaScript had made it look so straight forward with the window “localStorage” property.
localStorage allows access to store objects in the browser without been cleared, localStorage is a little bit similar to “sessionStorage” in the sense that both are used in saving objects to the browser memory, but the main difference of all is that “sessionStorage” data gets cleared whenever the page session expires.
To create a localStorage you use the window function setItem() i.e. window.localStorage.setItem(“key”, “value”)
The key represents the name of the contents to be stored in browser localStorage throughout the application usage, while the value part represents the contents the key holds. The value could hold JSON data or literally anything, let’s give an example, consider a variable testObject that holds an object, we could save this object in a localStorage, but we would need to first need to stringify it. Then we would pass this to the value part and give a key name so as to access this data anytime in our application.
1. var testObject = { 'one': 1, 'two': 2, 'three': 3 };2. window.localStorage.setItem(“testObject”, JSON.stringify(testObject))3. To access the contents we just call the key name given. In our case, the key is “testObject”.
With this, we’ve saved this JSON object, which could be accessed anywhere on our application/ browser.
STEPS INVOLVED
1. Stringify the database fetched record e.g. JSON.stringify(“database record”), NOTE: “database record” comes as an object, What I meant by saying “database record” just means the single record fetched from database,
i.e. it could come like data = { ‘customer_ID’: 1, ‘Name’: ‘Stephen’, ‘email’: ‘sakintola351@gmail.com’ , ‘password’: ‘aZXa88279ahhNAhh#$26’}
2. Create a localStorage as explained earlier e.g. window.localStorage.setItem(“record”, JSON.stringify(“database records”))
3. Now use the window location.href attribute to change your route to the page you intend going to, that could be achieved using window.location.href = ‘dashboard’,
4. Doing as long as you’re still on the application it holds your record and whatsoever been done would be based on you been logged in only.
I’ll discuss in my next article, how to show a visual display of how to access what you input from your form and the part of logging out using localStorage.removeItem(‘testObject’) on the logout button click
