Understanding local storage
LocalStorage is where data is stored in the browser. This storage supports web applications or javascript applications store data locally without connecting to the internet. Local storage can permanently store data, so it's very different from a session where data is lost when the browser window is closed.
You can find the data stored in the localStorage browser by pressing CTRL +
SHIFT + I, then go to the application tab. Then pay attention to the storage
section → select local Storage. Then the data will be visible in the right
bar under the key and value.
1. setItem(key, value) used to store data
2. getItem(key) used to retrieve data
3. removeItem(key) used to delete data by key
4. clear() used to delete all data
5. key() used to retrieve the number of each key
There is no method for updating data. The way to update data that we can do is to change the value of the target key by using the command setItem()
|
| Data Stored in LocalStorage |
What is the Function of LocalStorage?
As the name suggests, localStorage functions to store any data, localStorage is the same as MySQL or MongoDB or any other DBMS. Because it is local, the stored data does not need to be accessed via the internet. You can use this data for application configuration settings, create note applications, and some applications with light data.localStorage Restrictions
1. Do not store sensitive user data in localStorage
2. localStorage cannot be used as a server replacement because
the data is not realtime, only stored in the browser
3. localStorage is not suitable for storing large data. Most
browsers only accept a maximum of 5MB of data.
4. Does not have many commands, can't join, can't index, only
uses keys and values as the basis for storing data. Key terms as a
field and value is the content of the key.
How to Use LocalStorage
Using localStorage is quite easy. There are only 5 methods to use it:1. setItem(key, value) used to store data
2. getItem(key) used to retrieve data
3. removeItem(key) used to delete data by key
4. clear() used to delete all data
5. key() used to retrieve the number of each key
There is no method for updating data. The way to update data that we can do is to change the value of the target key by using the command setItem()
1. Storing and Displaying Data
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button onclick="add()">Add</button>
<br><br>
<div id="data"></div>
<script>
function add(){
//save data to localstorage
localStorage.setItem('name', 'Jhon Due')
//get data
var data = localStorage.getItem('name')
//show data
document.getElementById('data').innerHTML = data
}
</script>
</body>
</html>
2. Storing and Displaying Array Data
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button onclick="add()">Add</button>
<br><br>
<ul id="data"></ul>
<script>
function add(){
var id = 0
var list = []
var data = {
name : 'Jhon Due',
age : 25,
address : 'Palembang'
}
//save data to localstorage
localStorage.setItem('personalData', JSON.stringify(data))
//get data and convert from string to array
var list = JSON.parse(localStorage.getItem('personalData'))
//show Data
document.getElementById('data').innerHTML = `<li> ${list.name} | ${list.age} | ${list.address}</li>`
}
</script>
</body>
</html>
3. Delete Data
//remove data based on key
localStorage.removeItem('data');
//remove all data
localStorage.clear()
ok so this tutorial, about understanding localstorage, how to use,
functions and limitations of localstorage. Hope it's useful. If you have
any questions, please ask in the comments column. That is all and thank
you.
0 Comments
Come on ask us and let's discuss together
Emoji