Akademi JavaScript · Pelajaran

Menyimpan dan Membaca Data

Gunakan setItem, getItem dan removeItem.

Pelajaran 1 daripada 413 langkah

Menyimpan dan Membaca Data ialah pelajaran Akademi JavaScript percuma di CoddyKit. Ini ialah pelajaran 1 daripada 4. Sebanyak 3 pelajaran dalam laluan pembelajaran ini boleh dibaca sepenuhnya secara percuma — selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan praktikal dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran Akademi JavaScript, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus Akademi JavaScript merangkumi sejumlah 4 pelajaran.

Penyimpanan Pasangan Kunci-Nilai dalam Pelayar

Web Storage menyediakan setiap asal dengan store pasangan kunci-nilai yang ringkas dalam pelayar. Kedua-dua API, localStorage dan sessionStorage, berkongsi kaedah yang sama dan hanya menyimpan rentetan.

Menulis dengan setItem

Simpan nilai dengan setItem(key, value). Kedua-dua argumen ialah rentetan.

localStorage.setItem("theme", "dark");
localStorage.setItem("username", "ada");

Membaca dengan getItem

Dapatkan semula nilai dengan getItem(key). Jika kunci itu tidak wujud, fungsi mengembalikan null, bukannya undefined.

const theme = localStorage.getItem("theme"); // "dark"
const missing = localStorage.getItem("nope"); // null

Akses Sifat

Anda juga boleh membaca dan menulis seperti sifat objek, tetapi bentuk kaedah lebih jelas dan mengelakkan pertembungan dengan nama terbina dalam. Utamakan kaedah tersebut.

localStorage.theme = "light";       // works
console.log(localStorage.theme);    // "light"

Mengalih Keluar Satu Item

Padam satu entri dengan removeItem(key). Mengalih keluar kunci yang tidak wujud tidak memberi kesan dan tidak berbahaya.

localStorage.removeItem("username");

Mengosongkan Segalanya

clear() memadamkan semua kunci untuk asal current. Gunakannya dengan berhati-hati; tiada cara membuat asal tindakan ini.

localStorage.clear();

Semuanya ialah Rentetan

Store hanya menyimpan rentetan. Nombor dan nilai boolean ditukar kepada teks. Baca semula nilai tersebut sebagai rentetan dan tukarkannya mengikut keperluan.

localStorage.setItem("count", 5);
const n = localStorage.getItem("count"); // "5" (string)
const num = Number(n);                    // 5

Mengira Kunci

Sifat length memberitahu bilangan kunci yang disimpan, manakala key(index) mengembalikan nama pada kedudukan tertentu. Ini berguna untuk melakukan lelaran.

console.log(localStorage.length);
const firstKey = localStorage.key(0);

Melakukan Lelaran pada Store

Ulang melalui semua kunci yang disimpan menggunakan panjang dan key(). Baca setiap nilai semasa anda meneruskannya.

for (let i = 0; i < localStorage.length; i++) {
  const k = localStorage.key(i);
  console.log(k, localStorage.getItem(k));
}

Menyemak Kewujudan

Oleh sebab kunci yang tiada mengembalikan null, anda boleh menguji kewujudannya dengan perbandingan mudah.

if (localStorage.getItem("token") !== null) {
  console.log("user has a token");
}

Asal yang Sama Sahaja

Store ditetapkan mengikut asal (skema + hos + port). Satu tapak tidak boleh membaca store tapak lain, dan http dengan https dikira sebagai asal yang berbeza.

Semakan Pantas

Membaca dan menulis Web Storage.

Ringkasan

Web Storage ialah store pasangan kunci-nilai rentetan bagi setiap asal. Gunakan setItem, getItem (mengembalikan null jika tiada), removeItem dan clear. Lakukan lelaran dengan length dan key(i). Semuanya ialah rentetan, jadi tukarkan jenis sendiri, dan store diasingkan mengikut asal.

Percuma untuk bermula

Pelajari JavaScript dengan tutor kecerdasan buatan — percuma

Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.

Kursus
59
Pelajaran
200

Soalan Lazim

Adakah pelajaran “Menyimpan dan Membaca Data” percuma?

Ya — sebanyak 3 pelajaran dalam laluan pembelajaran Akademi JavaScript, termasuk “Menyimpan dan Membaca Data”, boleh dibaca sepenuhnya secara percuma di web ini. Selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan interaktif dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Kursus Akademi JavaScript merangkumi sejumlah 4 pelajaran.

Apakah yang akan saya pelajari dalam “Menyimpan dan Membaca Data”?

Gunakan setItem, getItem dan removeItem. Anda berlatih Akademi JavaScript menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.

Adakah saya memerlukan pengalaman untuk memulakan Akademi JavaScript?

Tiada pengalaman terdahulu diperlukan. Pembelajaran Akademi JavaScript di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 1 daripada 4.

Berapa lamakah pelajaran “Menyimpan dan Membaca Data” diambil?

Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.

Bolehkah saya menulis dan menjalankan kod dalam pelajaran Akademi JavaScript ini?

Ya. Setiap pelajaran Akademi JavaScript menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.

Semua pelajaran dalam kursus ini

  1. Menyimpan dan Membaca Data
  2. localStorage berbanding sessionStorage
  3. Menyimpan Objek dengan JSON
  4. Peristiwa dan Had Storan
← Kembali ke Akademi JavaScript