Last updated on April 12th, 2022 at 09:32 am
Client side data storage is a trend now days. window.localStorage or localStorage api can be used to save and get data from browser storage. This API assist developers in saving data to the browser and retrieve it instead of using cookies or may be session(depending on use-cases). This is not a replacement for cookies or sessions.
Instead of putting together complex client and server side logic for fetching basic user information, we can make use of this data storage apis that is available in all major browsers. This approach can assist in drastically reducing load on the server and provide user with a seamless browsing experience. It may also help us to mitigate some of the expensive server side processing that might be required to fetch those basic details.
Unlike cookies (time based ) or sessions localStorage can persist data even when the browser is closed and reopened. Storage limit varies across different browsers. You may use this feature to store simple data like username, user preference, website theme color selection, auto populate form data, user navigated page history etc.,
How localStorage API works?
Step 1 : Load our demo website home page.
Step 2: Right click on the page and select Inspect option. This will open up a debug window in the browser. Go to “Console” tab
Step 3: Lets save some data on the browser
Type command window.localStorage and hit enter, then type as show below, in this statement we are creating an item named “myname” with value “Tim“
localStorage.setItem("myname","Tim")
Ignore the “undefined“, that simply states nothing is returned. It is a console default behavior.
Step 4: Get the value back from the browser local storage.
localStorage.getItem("myname")
Step 5: Verify whether the data persist after browser session is closed . Close all tabs and quit from the browser. Reopen browser and run the command again in Step 4 to get the item . It should show the value. This means that data is not deleted even after the user close the browser.
Get items using window.localStorage or localStorage
Instead of using localStorage.getItem we can also use window.localStorage.<ITEMNAME> to get the value as shown below. To get number of items in the localStorage , simply use window.localStorage.length or localStorage.length
For demo purpose I created one more name
localStorage.setItem("mystate","Seattle")
How to delete these items?
There are two ways to delete. One is clearing all the data for the origin, In this case the origin is demo.mistonline.in or just delete an individual item.
We can use removeItem to delete individual items. As you can see below we have removed the item first and then used both window.localStorage and also localStorage.getItem to get the value of name ‘myname’ which is null. Now we have only 1 item left that is with the name “mystate“
How to clear all items with respect to an origin?
Just run window.localStorage.clear() and it will clear all. localStorage.clear() also serves the same purpose
Note: localStorage basically refers to window.localStorage unless you have a variable named localStorage defined in your javascript code. For example within your javascript you might have referenced like this
var localstorage = 20;
If that is the case then calling window.localStorage might show a different output.(Probably you may need to modify your code and change the variable to something else since localStorage is an inbuilt function within browser.)
Reference
More details along with some real world examples can be found in the documentation from Mozilla. It is pretty straightforward and easy to understand. I didn’t find a need here to show you some demo when Mozilla has already done a pretty good job of explaining every aspects of localStorage in detail. Check out the links below.
https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage
https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Client-side_storage#client-side_storage
admin