Local Storage

Introduction

localStorage is a web storage feature enabling web applications to store data in the browser persistently. This data remains accessible even after the browser window is closed, offering a means to save key-value pairs in a web browser.

Using localStorage in JavaScript

localStorage is a property of the window object, and can be accessed using window.localStorage. It is an object with methods for storing and retrieving data.

The data is stored as JSON key-value pairs, where both the key and value are strings.

• Setting Items: localStorage.setItem(key, value); Stores a pair of key and value in localStorage. Both key and value need to be strings.
• Getting Items: localStorage.getItem(key); Retrieves the value of the specified key from localStorage. Returns null if the key does not exist.
• Removing Items: localStorage.removeItem(key); Removes the specified key and its value from localStorage.
• Clearing All Data: localStorage.clear(); Clears all key-value pairs stored in localStorage for the domain.
• Key Enumeration: localStorage.key(index); Returns the name of the nth key in localStorage, enabling iteration over keys.

Practical Examples

1. Storing Data:
   javascript Copy

   	// Storing user name and theme preference in localStorage
   	localStorage.setItem('user', 'Ola Nordmann');
   	localStorage.setItem('theme', 'dark');

2. Retrieving Data:
   javascript Copy

   	// Retrieving user name and theme preference from localStorage
   	const user = localStorage.getItem('user');
   	const theme = localStorage.getItem('theme');
   	console.log(user, theme); // Logs: Ola Nordmann dark

3. Removing Data:
   javascript Copy

   	// Removing the theme preference from localStorage
   	localStorage.removeItem('theme');

Seeing the data in localStorage

You can see the data stored in localStorage by opening the developer tools in your browser which can be opened by pressing F12 or Ctrl+Shift+I. If you are using Chrome or Edge, you will find the data under the Application tab. If you are using Firefox, you will find the data under the Storage tab. The data will be stored according to the domain you are on, which in our case is localhost. Click on localhost and you will see the localStorage data you have stored.

Importance of localStorage in JavaScript Web Development

• Persistence: Data stored in localStorage remains available across browser sessions.
• Client-side Storage: Ideal for storing user preferences, settings, and temporary data locally, reducing the need to store such data on the server.
• Offline Accessibility: Enables access to data even when the user is offline.

Key Concepts of localStorage

1. Storage Limit: Approximately 5MB of data storage per domain.
2. Browser Support: Supported by most modern web browsers.
3. Security: Accessible only by pages from the same origin, enhancing security.

Conclusion

localStorage is a vital tool in JavaScript for persistent client-side storage, enhancing user experience by enabling data persistence across browser sessions.

Lesson Task

Brief

You will practice using localStorage to store and retrieve data.

Task: Practice with localStorage

1. Create a new HTML page that loads a JavaScript file.
2. In the JavaScript file, create a person object with the following properties:
   • first name
   • last name
   • age
3. Store the person object in localStorage.
4. Retrieve the person object from localStorage and log it to the console.

Solution:

	const person = {
	  firstName: 'Ola',
	  lastName: 'Nordmann',
	  age: 30
	};
	
	localStorage.setItem('person', JSON.stringify(person));
	
	const personString = localStorage.getItem('person');
	const personObject = JSON.parse(personString);
	
	console.log(personObject);