HTML DOM Window localStorage is provided by Browser and it allows us to store data as key-value pairs in our web browser using an object. The localStorage is the read-only property of the window interface.
Data is stored as key-value pair and the keys are unique. The keys and the values are always in the UTF-16 DOM String format that is stored within localStorage.
The main features of localStorage are:
- The storage is the origin(domain) bounded.
- The data will not get deleted even if the browser is closed or even OS reboot and will be available until we manually clear the Local Storage of our Browser.
ourStorage = window.localStorage;
The above will return a storage object which can be used to access the current origin’s local storage space.
Properties and methods provided by the localStorage object:
- setItem( key , value ): stores key/value pair
- getItem( key ): returns the value in front of key
- key( index ): get the key on a given index
- length: returns the number of stored items(data)
- removeItem( key ): removes given key with its value
- clear(): deletes everything from the storage
Example: The following snippet accesses the current domain’s localStorage object.
Note: To view the data in the browser’s Local Storage, do the following.
- Open your code in the browser.
- Right-Click And Click on Inspect.
- Then go to the Applications tab on the toolbar.
- Saving data as key/value pair
- Updating data
- Get data, index of a key, and number of stored items
- Remove a key with its value
- Delete everything in storage