Local Storage: What, When, and How?

What?

localStorage is a part of the HTML5 Web Storage API. It allows you, the developer, the ability to store information within the browser and gives you a way to easily retrieve and use the stored data. Data is stored in the form of "key"

Local Storage vs. Cookies vs. Session Storage

  1. Android: 2MB
  2. Firefox: 10MB
  3. Safari: 5MB

When and How to use Local Storage?

Local Storage provides us with 5 easy methods to use in order to read, access, and manipulate it.

  1. localStorage.getItem("key") : retrieve the value of a key by passing the key into the method as an argument
  2. localStorage.removeItem("key") : remove an entry from Local Storage by passing the key as an argument
  3. localStorage.clear() : clears all entries in Local Storage
  4. localStorage.key(n) : given a number, will return the nth key
~/Library/Application Support/Google/Chrome/<Profile>/Local Storage/ 
~/Library/Application Support/Firefox/Profiles/<profile folder>/webappsstore.sqlite 
let user = {
id: 1,
first_name: "Cory"
}
>> Successful Loginwindow.localStorage.setItem("current_user", JSON.strigify(user))
JSON.parse(window.localStorage.getItem("current_user"))>> user = {id: 1, first_name: "cory"}

The wise use of LocalStorage

While LocalStorage can be incredibly useful, it’s still vulnerable when used to store sensitive information. Local Storage is at risk to Cross-Site-Scripting attacks and information stored within it could possibly fall into the wrong hands as a consequence. LocalStorage, while very fast at retrieving and storing information, is also synchronous which means any calls to it will execute after the previous call finishes and can cause unexpected issues if you’re attempting to use it in asynchronous functions. Local Storage should also never be mistaken as an alternative to a back-end database as it is limited in storage capacity and can be accessed by anyone with access to your local files.

Local Storage Encryption

The best way to ensure security while using Local Storage is through encryption. Encryption is the process of converting information or data into a code, especially to prevent unauthorized access. The most popular method of encrypting Local Storage is through the secure-web-storage package. The following code is an example usage of this library

var CryptoJS = require("crypto-js");var SECRET_KEY = 'my secret key';var secureStorage = new SecureStorage(localStorage, {hash: function hash(key) {key = CryptoJS.SHA256(key, SECRET_KEY);return key.toString();},encrypt: function encrypt(data) {data = CryptoJS.AES.encrypt(data, SECRET_KEY);data = data.toString();return data;},decrypt: function decrypt(data) {data = CryptoJS.AES.decrypt(data, SECRET_KEY);data = data.toString(CryptoJS.enc.Utf8);return data;}});var data = {secret: 'data'};// there is no need to stringify/parse you objects before and after storing.secureStorage.setItem('data', data);// stores in localStorage like:// key => value// "ad36d572..." => "w1svi6n..."var decryptedData = secureStorage.getItem('data');// returns { secret: 'data' }secureStorage.removeItem('data');// removes the entry 'data'secureStorage.key(id)// returns the hashed version of the key you passed into setItem with the given id.secureStorage.clear();// clears all data in the underlining sessionStorage/localStorage.secureStorage.length;// the number of entries in the underlining sessionStorage/localStorage.

See Local Storage In Action

Popular uses of LocalStorage can be found on any major site by right-clicking on the web page and clicking ‘inspect’, followed by clicking ‘Application’ from the top menu and navigating to ‘Local Storage’. If you do this on a site such as YouTube or Reddit, you’ll see that they store information such as user-preferences in Local Storage. You might find that they are storing things like your settings for dark-mode and light-mode, or your video-volume settings, for example, on YouTube. They store information that isn't sensitive by nature and needs to be accessed very quickly by the client.

Software Developer