Solutions To Store Data Temporally (local storage).

What are we talking about?

While we are developing a web app or mobile app, Some of the data that needs to be stored will have to be permanent and hence should be saved in the Database, But other times you will need just to store it temporally and not for a long time, that's were you will need a client side solution that offers data storage possibilities to store values temporally.

1. Local storage.
2. Sessions.
3. Cookies.
4. SQLite.

In this article we are going to go discuss using local storage.

What is a local storage?

A type of web storage that allows JavaScript websites and apps to store and access data right in the browser with no expiration date.

How it really works?!

Keep it mind that its in Key, Value format, with the use of methods:

1. setItem(): Add key and value to localStorage.
2. getItem(): Retrieve a value by the key from localStorage.
3. removeItem(): Remove an item by key from localStorage.
4. clear(): Clear all localStorage.
5. key(): Passed a number to retrieve nth key of a localStorage.

js
//To set Student data
function SetStudentData() {
window.localStorage.setItem('Name', 'Sara');
window.localStorage.setItem('Age', '22');
window.localStorage.setItem('Gender', 'Female');
}

// To get Student Data
function GetStudentData() {
var name = window.localStorage.getItem('Name');
var age = window.localStorage.getItem('Age');
var gender = window.localStorage.getItem('Gender');
}

How Can i view local storage saved data?

To View saved data, while on browser after running your program, press right click --> Inspect or Inspect elements in some browsers --> Then based on your browser type, look for storage or Application --> you will then find a tab or a link with name: local storage.

Chrome

FireFox

Example for a Scenario that requires using local storage

At this point you might be wondering? what possible scenario would a good fit to use local storage solution!

let's say you are developing an X/O Game, We will have to store the value of each Square (Will assume that squares ranged from value 0 to 8) to be able to compare it later, So one possible solution is to save it by setting the value selected for each square in localstorage, and then compare it later by getting values and compare it using one of the conditional statements and loops.

Advantages

1. It is very handy for key-value pairs.
2. Stores data with no expiration date unlike session where is loses data after a specific amount of time.

Disadvantages

1. If user deleted or re-install app all data will be lost.
2. If user deleted the data of application it will be lost.
3. Hard to store complex data
4. You cannot "query" your data
5. If you are using more than 1 webview on your mobile app you need your HTML5 content to came from the same domain, otherwise the LocalStorage data will not be shared across webviews.
6. Storage limitation (~5MB) depend on browser. (for more info here)
7. Only store string so you will end up convert into json (JSON.stringify) and query through JSON object
8. Once the mobile storage is full, it will force pure all the data inside storage.
9. Insecure as it has no form of data protection and can be accessed by any code on your web page.

Ps.

Before using web storage, check browser support for localStorage and sessionStorage:

js
if (typeof(Storage) !== "undefined") {
// Code for localStorage/sessionStorage.
} else {
// Sorry! No Web Storage support..
}

Conclusion

So from what has been declared above, if your application store small amount of data or mostly do transaction or processes with online database. local Storage is likely a good option.

After all that have been said what is your favorite way to store values? And why do you prefer it? also in what scenario you prefer to use such solutions? Please share it with us in the comments section below.

Comments

[Jaafar Melhem]

Great Explanation! keep up the good work

[Sara °°°]

Thank you Jaafar :) :)