Di mana penyimpanan lokal disimpan javascript?

Question

Di masa-masa awal internet, Anda membutuhkan server untuk menyimpan data. Namun saat ini, melalui LocalStorage, Anda dapat menyimpan data di browser dan aplikasi tanpa berkomunikasi dengan server back-end

Table of Contents Show

Mari kita bicara tentang penyimpanan web
Apa itu Penyimpanan Lokal?
Kasus Penggunaan Penyimpanan Lokal
1. Menyimpan Data Formulir yang Diserahkan Sebagian
3. Database untuk aplikasi dasar
Cara Mengakses Penyimpanan Lokal
Cara Menggunakan Penyimpanan Lokal
hapusItem()
Beberapa Poin Penting Tentang Penyimpanan Lokal
Di mana penyimpanan lokal disimpan?
Bagaimana cara mengakses penyimpanan lokal di js?
Bagaimana cara mengedit penyimpanan lokal di JavaScript?
Apakah penyimpanan lokal merupakan bagian dari Dom?

Pada artikel ini, Anda akan belajar tentang aplikasi teoretis dan praktis dari LocalStorage dalam JavaScript

Mari kita bicara tentang penyimpanan web

Sebelum kita terjun ke real deal, mari kita lihat definisi penyimpanan web. Penyimpanan web adalah salah satu fitur hebat HTML5 yang memungkinkan aplikasi web menyimpan data secara lokal di dalam browser pengguna

Dua bentuk penyimpanan web yang paling umum adalah Penyimpanan Lokal dan Penyimpanan Sesi. Perbedaan utama antara kedua bentuk penyimpanan web ini adalah data yang disimpan di

//Storing objects in LocalStorage
const user = {
  name: "Mandy",
  age: 23,
};

localStorage.setItem("user-info", JSON.stringify(user));

//Storing arrays/lists in LocalStorage
const names = ["John", "Jake", "Vanessa"];
localStorage.setItem("names", JSON.stringify(names));

1 tidak pernah meninggalkan browser dan tetap di sana hingga Anda menghapusnya secara eksplisit. Sebaliknya, data yang disimpan di

//Storing objects in LocalStorage
const user = {
  name: "Mandy",
  age: 23,
};

localStorage.setItem("user-info", JSON.stringify(user));

//Storing arrays/lists in LocalStorage
const names = ["John", "Jake", "Vanessa"];
localStorage.setItem("names", JSON.stringify(names));

_2 dihapus setelah tab/jendela browser ditutup

Apa itu Penyimpanan Lokal?

Seperti disebutkan sebelumnya, LocalStorage adalah bentuk penyimpanan web yang disediakan oleh browser yang memungkinkan aplikasi web menyimpan data secara lokal di dalam browser pengguna tanpa tanggal kedaluwarsa. Di sini, data yang disimpan akan tetap tersedia bahkan saat Anda menutup tab/jendela browser

Perhatikan bahwa data yang disimpan di Penyimpanan Lokal hanya disimpan di browser pengguna di perangkat yang mereka gunakan untuk mengakses situs. Oleh karena itu, pengguna tidak dapat mengakses data yang disimpan jika mereka mengunjungi kembali situs yang sama nanti dengan browser yang berbeda atau di perangkat lain

Kasus Penggunaan Penyimpanan Lokal

Berikut ini menyajikan beberapa kasus penggunaan LocalStorage sehari-hari

1. Menyimpan Data Formulir yang Diserahkan Sebagian

Jika pengguna mengisi formulir panjang secara online, Penyimpanan Lokal dapat menjadi sumber daya yang berguna untuk menyimpan input pengguna. Dalam hal ini, bahkan jika internet terputus antara mengisi formulir dan mengirimkannya, pengguna tidak akan kehilangan masukan dan dapat melanjutkan dari bagian terakhir yang mereka tinggalkan

2. Caching

Caching mengacu pada penyimpanan data seperti detail login pada perangkat pengguna sehingga permintaan di masa mendatang untuk data tersebut dapat dilayani lebih cepat. Anda dapat menggunakan LocalStorage untuk meng-cache seluruh situs web sehingga pengguna tetap dapat mengakses situs tersebut meskipun mereka sedang offline

3. Database untuk aplikasi dasar

Seperti disebutkan sebelumnya, penyimpanan data pada awalnya hanya dimungkinkan dengan berkomunikasi dengan database melalui backend. Namun kini, dengan LocalStorage, Anda dapat menyimpan data di frontend tanpa memerlukan database. Karenanya LocalStorage terkadang dapat berfungsi sebagai database "kecil" untuk aplikasi dasar

Cara Mengakses Penyimpanan Lokal

Mengakses LocalStorage cukup sederhana dan hanya memerlukan beberapa langkah

Buka situs web atau aplikasi web apa pun dan buka konsol browser dengan menekan F12 pada keyboard

Selanjutnya, klik tab Aplikasi, dan di menu sebelah kiri, Anda akan melihat

//Storing objects in LocalStorage
const user = {
  name: "Mandy",
  age: 23,
};

localStorage.setItem("user-info", JSON.stringify(user));

//Storing arrays/lists in LocalStorage
const names = ["John", "Jake", "Vanessa"];
localStorage.setItem("names", JSON.stringify(names));

1 di bawah tab Penyimpanan seperti yang ditunjukkan di bawah ini

Klik pada tarik-turun

//Storing objects in LocalStorage
const user = {
  name: "Mandy",
  age: 23,
};

localStorage.setItem("user-info", JSON.stringify(user));

//Storing arrays/lists in LocalStorage
const names = ["John", "Jake", "Vanessa"];
localStorage.setItem("names", JSON.stringify(names));

1 dan selanjutnya klik pada item tarik-turun.

Seperti yang bisa dilihat, ada dua kolom,

//Storing objects in LocalStorage
const user = {
  name: "Mandy",
  age: 23,
};

localStorage.setItem("user-info", JSON.stringify(user));

//Storing arrays/lists in LocalStorage
const names = ["John", "Jake", "Vanessa"];
localStorage.setItem("names", JSON.stringify(names));

5, dan

//Storing objects in LocalStorage
const user = {
  name: "Mandy",
  age: 23,
};

localStorage.setItem("user-info", JSON.stringify(user));

//Storing arrays/lists in LocalStorage
const names = ["John", "Jake", "Vanessa"];
localStorage.setItem("names", JSON.stringify(names));

6. Di sinilah LocalStorage menyimpan setiap data yang Anda simpan ke dalamnya

Cara Menggunakan Penyimpanan Lokal

Anda dapat menggunakan metode berikut untuk mengelola data di LocalStorage

MethodDescription

//Storing objects in LocalStorage
const user = {
  name: "Mandy",
  age: 23,
};

localStorage.setItem("user-info", JSON.stringify(user));

//Storing arrays/lists in LocalStorage
const names = ["John", "Jake", "Vanessa"];
localStorage.setItem("names", JSON.stringify(names));

_7Untuk menyimpan data di LocalStorage.

//Storing objects in LocalStorage
const user = {
  name: "Mandy",
  age: 23,
};

localStorage.setItem("user-info", JSON.stringify(user));

//Storing arrays/lists in LocalStorage
const names = ["John", "Jake", "Vanessa"];
localStorage.setItem("names", JSON.stringify(names));

8Untuk mendapatkan atau mengambil data dari LocalStorage________0______9Untuk menghapus data dari LocalStorage menggunakan kunci

localStorage.getItem("user-info");

0Untuk mengambil data dari LocalStorage pada indeks tertentu

setItem( )

Metode ini digunakan untuk menyimpan data di LocalStorage. Itu menerima kunci sebagai argumen pertama dan kemudian nilai sebagai argumen kedua

Mari tambahkan data ke

//Storing objects in LocalStorage
const user = {
  name: "Mandy",
  age: 23,
};

localStorage.setItem("user-info", JSON.stringify(user));

//Storing arrays/lists in LocalStorage
const names = ["John", "Jake", "Vanessa"];
localStorage.setItem("names", JSON.stringify(names));

_1 menggunakan yang berikut ini

localStorage.setItem("name", "Mandy");
// Here, `name` is the key and `Mandy` is the value

Masuk ke mode layar penuh Keluar dari mode layar penuh

Seperti disebutkan sebelumnya, LocalStorage menyimpan data sebagai string, jadi jika Anda ingin menyimpan data seperti objek dan array, Anda perlu mengonversinya menjadi string menggunakan metode

localStorage.getItem("user-info");

2

Mari kita lihat bagaimana ini bekerja

//Storing objects in LocalStorage
const user = {
  name: "Mandy",
  age: 23,
};

localStorage.setItem("user-info", JSON.stringify(user));

//Storing arrays/lists in LocalStorage
const names = ["John", "Jake", "Vanessa"];
localStorage.setItem("names", JSON.stringify(names));

Masuk ke mode layar penuh Keluar dari mode layar penuh

getItem()

Gunakan metode

//Storing objects in LocalStorage
const user = {
  name: "Mandy",
  age: 23,
};

localStorage.setItem("user-info", JSON.stringify(user));

//Storing arrays/lists in LocalStorage
const names = ["John", "Jake", "Vanessa"];
localStorage.setItem("names", JSON.stringify(names));

_8 untuk mengambil data dari Penyimpanan Lokal. Metode ini menerima satu parameter, yaitu

//Storing objects in LocalStorage
const user = {
  name: "Mandy",
  age: 23,
};

localStorage.setItem("user-info", JSON.stringify(user));

//Storing arrays/lists in LocalStorage
const names = ["John", "Jake", "Vanessa"];
localStorage.setItem("names", JSON.stringify(names));

5 yang digunakan saat menyimpan data

Misalnya, untuk mengambil data seperti objek

localStorage.getItem("user-info");

5 di atas, Anda akan menggunakan pernyataan berikut

localStorage.getItem("user-info");

_

Masuk ke mode layar penuh Keluar dari mode layar penuh

Kode di atas akan mengembalikan string

localStorage.getItem("user-info");

_6 seperti yang ditunjukkan di bawah ini

"{name:"Mandy", age:"23"}"

Masuk ke mode layar penuh Keluar dari mode layar penuh

Anda kemudian harus mengonversinya menjadi objek menggunakan metode

localStorage.getItem("user-info");

7

JSON.parse(localStorage.getItem('user-info'));

Masuk ke mode layar penuh Keluar dari mode layar penuh

hapusItem()

Gunakan metode

//Storing objects in LocalStorage
const user = {
  name: "Mandy",
  age: 23,
};

localStorage.setItem("user-info", JSON.stringify(user));

//Storing arrays/lists in LocalStorage
const names = ["John", "Jake", "Vanessa"];
localStorage.setItem("names", JSON.stringify(names));

_9 untuk menghapus data dari Penyimpanan Lokal. Metode ini menerima

//Storing objects in LocalStorage
const user = {
  name: "Mandy",
  age: 23,
};

localStorage.setItem("user-info", JSON.stringify(user));

//Storing arrays/lists in LocalStorage
const names = ["John", "Jake", "Vanessa"];
localStorage.setItem("names", JSON.stringify(names));

_5 sebagai parameter

Misalnya, Anda akan menggunakan pernyataan berikut untuk menghapus objek

localStorage.getItem("user-info");

5 dari LocalStorage

localStorage.removeItem("user-info");

Masuk ke mode layar penuh Keluar dari mode layar penuh

kunci()

Gunakan metode

"{name:"Mandy", age:"23"}"

_1 untuk mengambil data dari LocalStorage, di mana

"{name:"Mandy", age:"23"}"

2 mewakili

"{name:"Mandy", age:"23"}"

3 data yang ingin Anda ambil

localStorage.key(2);

Masuk ke mode layar penuh Keluar dari mode layar penuh

jernih()

Gunakan metode

"{name:"Mandy", age:"23"}"

_4 untuk menghapus atau menghapus semua data dari LocalStorage pada saat tertentu

localStorage.clear()

Masuk ke mode layar penuh Keluar dari mode layar penuh

Proyek

Sekarang setelah Anda mempelajari tentang metode utama yang digunakan untuk mengelola data di LocalStorage, mari kita mengotori tangan kita dengan membuat aplikasi web di mana pengguna dapat

Simpan data ke Penyimpanan Lokal
Ambil datanya

Hapus/Hapus data menggunakan

//Storing objects in LocalStorage
const user = {
  name: "Mandy",
  age: 23,
};

localStorage.setItem("user-info", JSON.stringify(user));

//Storing arrays/lists in LocalStorage
const names = ["John", "Jake", "Vanessa"];
localStorage.setItem("names", JSON.stringify(names));

5

Dan juga bersihkan semua data dari LocalStorage

Mari kita mulai dengan membuat folder baru dan membukanya di editor kode. Selanjutnya, buat tiga file,

"{name:"Mandy", age:"23"}"

6 ,

"{name:"Mandy", age:"23"}"

7 dan

"{name:"Mandy", age:"23"}"

8

Ayo Kode

File

"{name:"Mandy", age:"23"}"

_6 akan berisi markup HTML untuk aplikasi web. Kode HTML terdiri dari formulir yang memiliki berbagai bidang input dengan tombol

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>Local Storage</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div id="form">
      <form id="userForm">
        <h1>LocalStorage Application</h1>
        <label for="userName">User</label>
        <input
          type="text"
          id="userName"
          placeholder="Enter user name"
          required
          autofocus
        /><br />
        <label for="age">Age</label>
        <input
          type="number"
          id="age"
          placeholder="Enter user age"
          required
        /><br />
        <label for="key">Key</label>
        <input type="text" id="key" placeholder="Enter key" required /><br />
        <button type="submit">Save user</button>
      </form>
      <br />
      <label for="key">Enter Key to retrieve user</label>
      <input
        type="text"
        id="retrieveKey"
        placeholder="Enter key to access user"
        required
      /><br />
      <button id="retrieveButton">Retrieve user</button>
      <br />
      <div id="userData"></div>
      <br />
      <label for="removeKey">Enter Key to delete user</label>
      <input
        type="text"
        id="removeKey"
        placeholder="removeKey"
        required
      /><br />
      <button id="removeButton">Delete user</button>
      <br />
      <button id="clearButton">Delete all users</button>
    </div>
    <script type="text/javascript" src="main.js"></script>
  </body>
</html>

Masuk ke mode layar penuh Keluar dari mode layar penuh

Berikut kode CSSnya

/* base styles  */
html {
  font-size: 67.5%;
}
body {
  font-size: 1.6rem;
  padding: 0;
  margin: 0;
}

/* form   */
#form {
  margin-left: 2rem;
}

Masuk ke mode layar penuh Keluar dari mode layar penuh

Inilah file

"{name:"Mandy", age:"23"}"

_8 yang berisi semua fungsi untuk menyimpan, mengambil, dan menghapus data dari LocalStorage

//Storing objects in LocalStorage
const user = {
  name: "Mandy",
  age: 23,
};

localStorage.setItem("user-info", JSON.stringify(user));

//Storing arrays/lists in LocalStorage
const names = ["John", "Jake", "Vanessa"];
localStorage.setItem("names", JSON.stringify(names));

0

Masuk ke mode layar penuh Keluar dari mode layar penuh

Hasil

Video berikut menunjukkan bagaimana hasil akhir proyek bekerja

Beberapa Poin Penting Tentang Penyimpanan Lokal

Penyimpanan lokal tidak memiliki perlindungan data dan karenanya tidak aman untuk menyimpan data sensitif karena dapat diakses oleh siapa saja
Penyimpanan lokal hanya dapat menyimpan maksimal 5 MB data di browser

Kesimpulan

Saya mendorong Anda untuk berlatih dan bereksperimen dengan LocalStorage dengan menggunakannya di aplikasi Anda. Biasakan untuk menyimpan, mengambil, dan menghapus data darinya

Terima kasih sudah membaca

Saya harap ini menjadi bacaan yang bermanfaat. Silakan bagikan artikel ini dan ikuti saya di Twitter @dboatengx untuk pembaruan pada posting mendatang

Di mana penyimpanan lokal disimpan?

Banyak ekstensi peramban menyimpan datanya di apa yang disebut Penyimpanan Lokal peramban, yang tidak lain adalah lokasi penyimpanan yang dikelola oleh peramban web. Dan seperti saran yang sama, semua disimpan secara lokal di mesin tempat browser dipasang . Penyimpanan lokal tidak ada di cloud.

Bagaimana cara mengakses penyimpanan lokal di js?

Anda dapat mengakses fungsionalitas localStorage melalui Window. properti localStorage . Properti ini menyediakan beberapa metode seperti setItem(), getItem(), dan removeItem(). Anda dapat menggunakan ini untuk menyimpan, membaca, dan menghapus pasangan kunci/nilai.

Bagaimana cara mengedit penyimpanan lokal di JavaScript?

Sintaks .

Simpan Data ke Penyimpanan Lokal. penyimpanan lokal. setItem(kunci, nilai);

Baca Data dari Penyimpanan Lokal. biarkan nama belakang = localStorage. getItem(kunci);

Hapus Data dari Penyimpanan Lokal. penyimpanan lokal. hapusItem(kunci);

Hapus Semua (Hapus Penyimpanan Lokal) localStorage. jernih();

Apakah penyimpanan lokal merupakan bagian dari Dom?

Penyimpanan DOM atau Penyimpanan Web adalah nama kolektif yang diberikan untuk tipe opsi penyimpanan klien berikut yang tersedia di HTML5. Termasuk. penyimpanan lokal .

kode javascript