JavaScript Web Storage API
If you have ever built a client side application, you quickly learn how important it is to keep user preferences persistent across pages. Search through data by sorting or filtering quickly gets old if you have to always adjust your filters when you come back to the list. In the past, browser cookies allowed us to store such settings. Cookies, however, are not the best choice as they are were designed to talk to your server to exchange information. These days we have better tools, specifically Web Storage. Web Storage provides methods to make these filters stick across either the browsing session or stay for the next visit.
What is web storage?
Web Storage allows browsers to store data within the web browser. Web Storage comes in two flavours:
- localStorage
- sessionStorage - Limited to browsing sessions
localStorage
localStorage provides an object to store data with no expiration. This data is persistent and will remain even if the user closes the browser or tab. It will stay until the user clears the data manually in their browser settings.
To add an item to localStorage:
localStorage.setItem("name", "John");
To retrieve an item to localStorage:
var name = localStorage.getItem("name");
To remove an item to localStorage:
localStorage.removeItem("name");
You can also clear all items from localStorage with clear():
localStorage.clear();
sessionStorage
The sessionStorage is exactly the same as localStorage however will only persist for the browsing session. It will be cleared as soon as the user closes the browser or browser tab. if a user has two tabs open this will count as two sessions.
To add an item to sessionStorage:
sessionStorage.setItem("name", "John");
To retrieve an item to sessionStorage:
var name = sessionStorage.getItem("name");
To remove an item to sessionStorage:
sessionStorage.removeItem("name");
You can also clear all items from sessionStorage with clear():
sessionStorage.clear();
Storing objects
When trying to add objects to localStorage or sessionStorage you may notice that a string value of your variable is what actually gets stored. JavaScript runs to .toString() method of the variable before inserting it into storage. This happens for all types (booleans, numbers) but is particularly important when dealing with objects as when you retrieve you wont like what you see:
sessionStorage.setItem("profile", { name: 'Jimmy', username: 'jim'});
sessionStorage.getItem("profile");
> "[object Object]"
To get around this you will need to use JSON stringify and parse to convert the object to a string before adding it to storage and converting it back when retrieving.
sessionStorage.setItem("profile", JSON.stringify({ name: 'Jimmy', username: 'jim'}));
JSON.parse(sessionStorage.getItem("profile"));
> {name: "Jimmy", username: "jim"}
Browser check
I would be remiss if I did not mention that you should also do a compatibility check before using these methods. Attempting to use any of the Web Storage functions on older browsers before checking will cause a browser error and halt your entire application! Here is a simple way to check if Web Storage is available.
if (typeof(Storage) !== "undefined") {
// Web Storage supported!
}
Follow