The Web Storage API is a powerful tool for storing data in the browser. It consists of two storage mechanisms that are crucial for web development: Session Storage and Local Storage. These storage options are part of the wider range of storage capabilities available on the Web Platform, which includes Cookies, IndexedDB, and the Cache API.
Session Storage and Local Storage provide a private area for storing data, ensuring that it cannot be accessed by other websites. Session Storage retains data for the duration of the page session, allowing for different processes to be handled independently on the same site. When a tab or window is closed, the Session Storage for that specific instance is cleared.
On the other hand, Local Storage persists data until it is explicitly removed, either by the user or the developer. Unlike Session Storage, Local Storage is shared across all sessions that access a site. It is important to note that both Session Storage and Local Storage are protocol-specific, meaning that data stored when accessing a page using HTTP is not available when the page is served with HTTPS or vice versa.
To access Session Storage and Local Storage, you can use the sessionStorage and localStorage properties available on the window object. These properties return a Storage object, which provides a set of methods and properties. Both Session Storage and Local Storage share the same set of methods and properties, including:
setItem(key, value)
The setItem() method adds an item to the storage. It accepts a key and a value as string parameters. If a non-string value is passed, it will be automatically converted to a string.
getItem(key)
The getItem() method retrieves a string value from the storage by using the corresponding key.
removeItem(key)
The removeItem() method removes an item from the storage, identified by its key.
key(n)
The key() method returns the key of the item at the specified index. It should be noted that the order of keys is user-agent defined and should not be relied upon.
clear()
The clear() method removes all items from the storage.
The Storage API allows for storing significantly more data than cookies. However, the amount of storage available may vary depending on the storage type (local or session), browser, and device type.
For desktop browsers, Chrome, IE, and Firefox provide 10MB of storage, while Safari offers 5MB for local storage and unlimited session storage.
For mobile browsers, Chrome and Firefox provide 10MB of storage. iOS Safari and WebView offer 5MB for local storage, with unlimited session storage unless using iOS6 and iOS7, where the limit is also 5MB. The Android Browser provides 2MB of local storage and unlimited session storage.
When dealing with large amounts of data, it is important to handle quota errors. This can be achieved using a try/catch block and checking for specific exceptions.
The Developer Tools of major browsers provide a convenient interface for inspecting and manipulating data stored in the Local and Session Storage. Each browser offers its own version of the DevTools, making it easy to manage stored data during development and debugging.
-
Chrome DevTools:
-
Firefox DevTools:
-
Safari DevTools:
