What is local storage
Often you need to maintain a small amount of data for a web application such as a key, current timezone, user logged time etc. but you do not want to bear an overhead of sending this data to server or saving it in a database.
Solution is to use local storage of the browser.
What is local storage
HTML5 introduced the concept of web storage where you can store data inside the browser. This data remains forever till it is not cleared even after the browser window is closed.
Following are some important aspects regarding local storage
- Data stored in local storage has no expiration duration.
- Data stored in local storage is bound to a domain name and can be accessed by web paged loaded inside the same domain. Thus, data stored for codippa.com will be accessible to pages that belong to it. Pages of google.com cannot access it.
- Values stored in local storage are not sent to server. You need to explicitly retrieve them and then send to the server.
- With local storage, you can store 5 to 10 MB of data.
How to use local storage
Browser’s storage can be accessed using
localStorage object since
window object is implicit.
This object stores the data in key-value pairs. There are 2 ways in which data can be stored in
1. Using built-in methods
localStorage object has following methods that are used to save and get data from local storage.
setItem: This method is used to save data into local storage. It takes two arguments with first argument as the key and second as the value to be stored. Note that it stores both key and value in string format.
If the key is not a string, then this method will raise an error while if the value is not a string then it will be converted to string format.
getItem: This method is used to get the value stored against a key in local storage. It takes a single argument which is the key.
If the specified key-value mapping is not present, then it returns
// save in local storage window.localStorage.setItem('name', 'codippa'); // get from local storage let data = window.localStorage.getItem('name'); console.log(data); // prints codippa
2. Using key access
As stated previously,
objectname[‘key’] = value
If the key is not present, then it is created. If the key is already present, then its value is overwritten. Data in
localStorage also can be saved using similar syntax.
For retrieving the value corresponding to a key, same syntax is used except that the value is assigned to some variable as
let value = objectname[‘key’]
// create a key-value pair localStorage['name'] = 'codippa'; console.log(localStorage['name']; // prints codippa
Removing item from local storage
For removing a particular key-value pair from local storage, use
removeItem method of
localStorage object. This method takes a key and removes the key-value mapping corresponding to the supplied key from local storage.
If you want to remove all key-value pairs or empty local storage, then use
clear method of
localStorage object. This method takes no arguments and removes all the data from local storage.
// remove key-value pair with key as 'name' localStorage.removeItem('name'); // empty local storage localStorage.clear();
Save arrays or json objects
As mentioned earlier, a
localStorageobject can only store values in string format. Thus, if you want to save an array or a json object in local storage, convert it to string using
JSON.stringifymethod and save.
When retrieving the data, use
JSON.parsemethod to convert them into their actual type. Example,
Get total number of saved values
If you want to know the total number of key-value pairs stored in
localStorage object, then it has a
length property which can be used.
localStorage.length in above example will return 2.
Let’s tweak in
- Local storage can only be used to store limited amount of data.
- It can not be used as a replacement of server side database.
- Do not store sensitive information in local storage such as user names, passwords as the contents of
localStorageare clearly visible since they are stored in plain text and not encrypted.
- Data stored in
localStorageremains even after the browser window is closed.
- Local storage is different from cookies in that
- Cookies can store small amount of data(4 KB max) as compared to local storage.
- Cookies are sent to the server with every request
- Cookies expire(or get deleted) automatically after some specified time.
Hope this post successfully demonstrated the concept and usage of local storage in browsers. Hit the clap below to appreciate the content and motivate us to write more such stuff.0