This is important because…
knowing useful scenarios where local storage could benefit the user experience, but also knowing where it does not need to be included.
HTTP by default is stateless, meaning that say you were to close a web app, then load it back up; nothing would be “saved” / its state is reset.
This can be remedied by “storing the state”; usually server-side, and through the use of a user account.
The method of using a user account to save the state, can itself be circumvented through the use of local storage.
Local storage is useful for;
Classic cookies and the crumbs they leave behind…
Cookies have been, for a long time been used as a method of local storage.
Cookies are locally saved text files that are connected to the respective domain of the page the file contents are saved from. They do have their limitations and connotations tied with their use.
On modern HTML5 browsers, using local storage is as easy as defining the localStorage object, the setItem(), getItem() methods. Example below;
localStorage.setItem('favoritesport','skiing');
var sport = localStorage.getItem('favoritesport');
// -> "skiing"
Removing an item can be done through the removeItem() method;
localStorage.removeItem('favoritesport');
var taste = localStorage.getItem('favoritesport');
// -> null
JSON.stringify() (converts to string; saving) and JSON.parse() (converts back to usable object; loading).(* Broken Link, had to search for elsewhere…)
Local storage triumphs due to being able to store information in the registry, INI files, XML files, embedded databases, and in the OS’s own file format invention.
Whereas web apps can only store data in mainly cookies which are prone to slowing down the web app by constantly transmitting data, due to being included with HTTP requests. If requests are sent through standard HTTP rather than HTTPS (TLS/SSL), the data being sent is being sent unencrypted. Cookies are also limited in size (4KB).
Before HTML5, Flash objects were seen as an improvement over cookies functionality in both speed and data size, granting 100KB of storage per domain.
Data stored in key/value pairs, which when the site/page is closed and or otherwise navigate away from it; will remain. Referred to as Local Storage or DOM Storage and seen as a much more secure alternative.
JSON.stringify() and JSON.parse() methods.