Kita lanjutkan pembelajaran kita tentang Belajar Membuat Google Chrome Extention Part 2 tentang Menggunakan LocaStorage. Local storage bisa kita gunakan untuk menyimpan pengaturan pengaturan yang ada di dalam chrome extention. Kita akan membuat chrome extention CURD sederhana kedalam local storage extention dari google chrome
Beberapa method yang bisa ktia gunakan
Set Data / Tambah Data /Update
locaStorage.setItem("key","value")
localStorage["key"]="value"
Get Data
locaStorage.getItem("key")
localStorage["key"]
RemoveData
locaStorage.removeItem("key")
Get All Key
for (let i = 0; i < localStorage.lenght; i++) {
console.log(localStorage.key(i))
}
Step step pembuatan extention
1. Membuat manifest.json
{
"name": "latihan",
"version": "1.0",
"manifest_version": 3,
"description": "Latihan",
"action": {
"default_icon": "icon.png",
"default_title": "latihan bikin extention",
"default_popup": "popup.html"
}
}
2. Membuat popup.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<style>textarea { resize: none; }</style>
<body>
<h1>Belajar Bikin Extention : Storage</h1>
<textarea id="mydata" name="w3review" rows="10" cols="50"></textarea>
<button id="update" style="width:50%;padding:10px;" type="button">Update</button><button id="remove" style="width:50%;padding:10px;" type="button">Remove</button>
<script src="script.js"></script>
</body>
</html>
3. Membuat script.js
const btnUpdate = document.querySelector("#update");
const btnRemove = document.querySelector("#remove");
const data = document.querySelector("#mydata");
const key ="riffasoft";
data.value=localStorage[key];
btnUpdate.onclick=()=>{
localStorage.setItem(key,data.value)
}
btnRemove.onclick=()=>{
document.querySelector("#mydata").value="";
localStorage.removeItem(key)
}