Local Storage provides a set of functions to interact with the browser's local storage area. Here's an explanation of each function:
1. `setItem(key, value)`: This function is used to store data in the local storage. It takes two parameters: `key`, which is a string representing the name of the item you want to store, and `value`, which is the data you want to store. Both the key and value must be strings.
Example:
```javascript
localStorage.setItem('username', 'JohnDoe');
```
2. `getItem(key)`: This function retrieves the value of the item with the specified key from local storage. It takes one parameter: `key`, which is the name of the item you want to retrieve.
Example:
```javascript
const username = localStorage.getItem('username');
```
3. `removeItem(key)`: This function removes the item with the specified key from local storage. It takes one parameter: `key`, which is the name of the item you want to remove.
Example:
```javascript
localStorage.removeItem('username');
```
4. `clear()`: This function removes all items from local storage, effectively clearing the entire storage area.
Example:
```javascript
localStorage.clear();
```
5. `key(index)`: This function returns the name of the key at the specified index in local storage. Local storage maintains the order of keys based on when they were added.
Example:
```javascript
const firstKey = localStorage.key(0); // Retrieves the name of the first key
```
6. `length`: This property returns the number of items stored in local storage.
Example:
```javascript
const numberOfItems = localStorage.length; // Retrieves the number of items stored in local storage
```
These functions provide a simple and easy-to-use interface for interacting with local storage in the browser. By using these functions, you can store and retrieve data persistently on the client-side, enabling various functionalities in your web applications.
Example page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Local Storage Example</title>
</head>
<body>
<h1>Local Storage Example</h1>
<button onclick="storeData()">Store Data</button>
<button onclick="retrieveData()">Retrieve Data</button>
<button onclick="removeItem()">Remove Item</button>
<button onclick="clearStorage()">Clear Storage</button>
<p id="output"></p>
<script>
function storeData() {
// Storing data in Local Storage
localStorage.setItem('username', 'Champak Roy');
localStorage.setItem('color', 'blue');
localStorage.setItem('language', 'JavaScript');
document.getElementById('output').innerHTML = 'Data stored successfully!';
}
function retrieveData() {
// Retrieving and displaying all keys and their values
document.getElementById('output').innerHTML = '';
for (let i = 0; i < localStorage.length; i++) {
const key = localStorage.key(i);
const value = localStorage.getItem(key);
document.getElementById('output').innerHTML += `${key}: ${value}<br>`;
}
}
function removeItem() {
// Removing an item from Local Storage
localStorage.removeItem('username');
document.getElementById('output').innerHTML = 'Item removed successfully!';
}
function clearStorage() {
// Clearing Local Storage
localStorage.clear();
document.getElementById('output').innerHTML = 'Storage cleared successfully!';
}
</script>
</body>
</html>
Contact us for software training, education or development
.png)
0 Comments