Ini adalah wadah HTML yang cukup standar, dan dengan JavaScript kami, kami dapat mengisi semuanya dengan konten dinamis.

Karena kita akan menggunakan jQuery dalam contoh ini, Anda juga harus memasukkannya ke dalam dokumen HTML.

JavaScript

Jika kita memikirkan struktur aplikasi “to-do list” sederhana, hal pertama yang perlu kita lakukan adalah memeriksa apakah input memiliki nilai kosong ketika pengguna mengklik tombol “tambah” atau “periksa”:

$("#add").click(function() ( var Description = $("#description").val(); //jika to-do kosong if($("#description").val( ) == "") ( $("#alert").html(" Peringatan! Anda membiarkan tugas kosong"); $("#alert").fadeIn().delay(1000).fadeOut(); return false; )

Yang kami lakukan hanyalah menguji klik pada tombol Tambah dan menjalankan tes sederhana untuk melihat apakah pengguna mengisi input dengan sesuatu. Jika tidak, maka div peringatan akan muncul dan bertahan selama 1000 ms dan kemudian menghilang.

Hal berikutnya yang perlu kita lakukan adalah memasukkan item daftar dengan nilai ke dalam baris input, dan kita akan mengawalinya sehingga ketika pengguna menambahkan tugas, itu akan selalu berada di atas daftar, dan kemudian menyimpannya daftar item di penyimpanan lokal, seperti ini:

// tambahkan item daftar $("#todos").prepend("

Seperti yang Anda lihat, ini adalah jQuery yang cukup standar dan ketika menyangkut penyimpanan lokal, kami harus menyimpan kunci dan nilainya. Kuncinya adalah nama yang kita berikan pada diri kita sendiri, dalam hal ini kita sebut saja "Todos", lalu kita harus mendefinisikan apa yang ingin kita simpan, yang dalam hal ini adalah semua HTML yang ada di dalam Todos dari daftar yang tidak berurutan. Seperti yang Anda lihat, kami menangkap semuanya dengan jQuery, dan akhirnya mengembalikan "false" (salah) sehingga formulir tidak menyerah dan halaman kami tidak disegarkan.

Langkah kita selanjutnya adalah memeriksa apakah kita memiliki sesuatu yang disimpan secara lokal. Jika ada, maka kita perlu meletakkannya di halaman, mengingat kunci kita telah diberi nama "todos", kita perlu memeriksa keberadaannya. Seperti ini:

// jika kita memiliki sesuatu di tempat penyimpanan lokal yang if(localStorage.getItem("todos")) ( $("#todos").html(localStorage.getItem("todos")); )

Jika Anda menguji aplikasi kami dan memuat ulang halaman, Anda akan melihat bahwa itu sudah berfungsi. Yang harus kita lakukan adalah membuat fungsi yang akan bertanggung jawab untuk menghapus seluruh daftar. Kami menghapus semua penyimpanan lokal, memuat ulang halaman agar perubahan kami diterapkan, dan kemudian mengembalikan "false" untuk mencegah hash sebelum URL seperti:

// hapus semua penyimpanan lokal $("#clear").click(function() ( window.localStorage.clear(); location.reload(); return false; ));

Kode lengkap sebagai berikut:

$("#add").click(function() ( var Deskripsi = $("#description").val(); if($("#description").val() == "") ( $( "#alert").html(" Peringatan! Anda membiarkan to-do kosong"); $("#alert").fadeIn().delay(1000).fadeOut(); return false; ) $("#todos").prepend("

Dukungan Peramban

Dukungan Penyimpanan Web cukup bagus untuk spesifikasi HTML5, didukung oleh semua browser utama dan bahkan IE8.

Cookie yang kita bahas dalam tutorial sebelumnya sangat terbatas: satu cookie hanya dapat memiliki 4096 karakter, dan jumlah cookie per domain bisa sekitar 30-50 tergantung pada browser. Karena itu, sayangnya, tetapi tidak mungkin menyimpan banyak informasi di sana. Begitulah yang terjadi secara historis.

Untuk mengatasi batasan ini, browser memiliki alternatif untuk cookie - ini disebut penyimpanan lokal. Dalam penyimpanan lokal, kita dapat menyimpan 5-10 megabyte informasi atau bahkan lebih untuk waktu yang lama.

Bekerja dengan penyimpanan lokal

Untuk bekerja dengan penyimpanan lokal, objek localStorage yang dibangun ke dalam browser dimaksudkan. Ini memiliki 4 metode yang mudah dipahami. Di sini mereka:

//Menyimpan nilai: localStorage.setItem("Kunci", "Nilai"); //Mendapatkan nilai: var value = localStorage.getItem("Kunci"); //Hapus nilai: localStorage.removeItem("Kunci"); //Hapus semua penyimpanan: localStorage.clear();

DARI penyimpanan lokal anda juga dapat bekerja seperti dengan array biasa:

//Menyimpan nilai: localStorage["Kunci"] = "Nilai"; //Mendapatkan nilai: var value = localStorage["Kunci"]; //Menghapus nilai: delete localStorage["Kunci"];

Kecuali objek penyimpanan lokal ada juga objek penyimpanan sesi. Bekerja dengannya dilakukan dengan cara yang sama, satu-satunya perbedaan adalah bahwa semua data darinya secara otomatis dihancurkan setelah menutup browser atau tab dengan situs. Nah, penyimpanan lokal menyimpan data untuk waktu yang lama hingga data ini dihapus oleh skrip, atau pengguna browser mengosongkan penyimpanan lokal menggunakan pengaturan.

Contoh

Dalam contoh berikut, kami akan menulis nama pengguna ke penyimpanan lokal:

LocalStorage.setItem("nama", "John");

Setelah beberapa saat, kami akan mendapatkan kembali nama ini:

Alert(localStorage.getItem("nama"));

Seperti yang Anda lihat, tidak ada yang rumit di sini, semuanya jauh lebih sederhana daripada pekerjaan yang sama dengan cookie.

Menyimpan objek

Penyimpanan lokal tidak mampu menyimpan objek dan Array JavaScript meskipun ini sering nyaman. Tetapi ada cara - Anda perlu membuat serial data ini ke dalam format JSON - Anda mendapatkan string yang sudah dapat disimpan di localStorage. Kemudian, ketika kita perlu mendapatkan kembali objek ini - kita mengonversi string dari JSON kembali ke objek - dan menggunakannya dengan tenang.

Mari kita lihat proses ini dengan sebuah contoh. Buat serial objek dan simpan ke penyimpanan lokal:

//Diberikan sebuah objek: var obj = (nama: "Ivan", arr: ); // Buat serial ke "("name": "John", "arr": )": var json = JSON.stringify(obj); //Tulis ke localStorage dengan kunci obj: localStorage.setItem("obj", json);

Setelah beberapa saat, kami mendapatkan objek kembali:

//Dapatkan kembali data dari localStorage sebagai JSON: var json = localStorage.getItem("obj"); //Konversikan kembali ke objek JavaScript: var obj = JSON.parse(json); log konsol (obj);

Fitur tambahan

Menentukan jumlah catatan dalam penyimpanan: alert(localStorage.length).

Menentukan nama kunci dengan nomornya: alert(localStorage.key(number)).

Saat melakukan operasi penyimpanan, sebuah peristiwa dipicu gudang. Jika Anda mengikat fungsi ke acara ini, maka objek Acara dengan properti berikut akan tersedia di dalamnya:

function func(event) ( var key = event.key; //kunci data yang dapat diubah var oldValue = event.oldValue; //nilai lama var newValue = event.newValue; //nilai baru var storageArea = event.storageArea; // tempat penyimpanan)

Menambahkan. bahan

Menyimpan array di penyimpanan lokal: https://youtu.be/sYUILPMnrIo

Apa yang Anda lakukan selanjutnya:

Mulailah memecahkan masalah di tautan berikut: tugas untuk pelajaran.

Ketika semuanya diputuskan - pergi ke studi topik baru.

• Pelajaran #
  daftar putar di youtube
  Aplikasi praktis ES6

Beberapa video mungkin mendahului kami karena kami belum membahas semua ES6 pada titik ini dalam tutorial. Lewati saja video ini, tonton nanti.

Mengirim artikel dengan cerita tentang HTML5 LocalStorage di browser. Mari kita beri dia lantai.

Saya mencoba menulis panduan paling sederhana dan paling mudah dipahami untuk menggunakan teknologi localStorage. Artikel itu ternyata cukup kecil, karena fakta bahwa baik teknologi itu sendiri maupun cara bekerja dengannya tidak membawa sesuatu yang rumit. Anda hanya perlu mengetahui sedikit JavaScript untuk memulai. Jadi, berikan artikel ini 10 menit dan Anda dapat dengan aman menambahkan baris "Saya tahu cara bekerja dengan penyimpanan lokal" ke resume Anda.

Apa itu Penyimpanan lokal?

Seperti inilah tampilan objek JavaScript:

Var myCar = ( roda: 4, pintu: 4, mesin: 1, nama: "Jaguar" )

Dan seperti inilah tampilan JSON. Hampir sama dengan objek js biasa, hanya semua properti harus diapit tanda kutip.

( "FirstName": "Ivan", "lastName": "Ivanov", "address": ( "streetAddress": "Moskovskoye sh., 101, kv.101", "city": "Leningrad", "postalCode": 101101 ), "phoneNumbers": [ "812 123-1234", "916 123-4567" ] )

Untuk memahami apa itu localStorage, bayangkan saja di suatu tempat di browser Anda ada objek yang dapat kita gunakan. Pada saat yang sama, objek ini tidak menghapus nilai yang kami tulis di sana jika kami memuat ulang halaman atau bahkan menutup browser sepenuhnya.

Berbicara dalam JavaScript, localStorage adalah properti dari objek global browser (jendela). Itu dapat diakses sebagai window.localStorage atau hanya localStorage.

Perlu juga disebutkan bahwa browser memiliki tiruan dari localStorage, yang disebut sessionStorage. Satu-satunya perbedaan mereka adalah bahwa yang terakhir hanya menyimpan data untuk satu tab (sesi) dan hanya akan mengosongkan ruangnya segera setelah kami menutup tab

Mari kita lihat dia hidup. Misalnya, di Google Chrome Anda perlu membuka DevTools (F12), buka tab "Sumber Daya" dan di panel kiri Anda akan melihat Penyimpanan lokal untuk domain ini dan semua nilai yang dikandungnya.

Omong-omong, Anda harus tahu bagaimana localStorage bekerja dengan domain. Untuk setiap domain, browser Anda membuat objek penyimpanan lokalnya sendiri, dan hanya dapat diedit atau dilihat di domain tersebut. Misalnya, mydomain-1.com tidak dapat mengakses penyimpanan lokal mydomain-2.com Anda.

Mengapa saya membutuhkan Penyimpanan lokal?

LocalStorage diperlukan hanya untuk satu hal - untuk menyimpan data tertentu di antara sesi pengguna. Anda dapat memikirkan seribu satu hal yang dapat disimpan di penyimpanan lokal browser. Misalnya, game browser yang menggunakannya sebagai save, atau merekam momen saat pengguna berhenti saat menonton video, berbagai data untuk formulir, dll.

Bagaimana cara memulai localStorage?

Sangat sederhana.

Bekerja dengan localStorage sangat mirip dengan bekerja dengan objek dalam JavaScript. Ada beberapa metode untuk bekerja dengannya.

localStorage.setItem("kunci", "nilai")

Metode yang menambah penyimpanan lokal kunci baru dengan nilai (dan jika kunci seperti itu sudah ada, itu akan menimpanya dengan nilai baru). Kami menulis, misalnya, localStorage.setItem('myKey', 'myValue');

localStorage.getItem("kunci")

Kami mengambil nilai tertentu dari penyimpanan dengan kunci.

localStorage.removeItem("Kunci")

Hapus kuncinya

penyimpanan lokal.clear()

Menghapus semua penyimpanan

Sekarang Anda dapat membuka tab dengan penyimpanan lokal browser Anda dan berlatih menulis dan mengambil data dari penyimpanan ini sendiri. Jika ada, kami menulis semua kode dalam file js.

//Menambahkan atau mengubah nilai: localStorage.setItem("myKey", "myValue"); //sekarang Anda memiliki kunci "myKey" dengan nilai "myValue" yang disimpan di localStorage //Cetak ke konsol: var localValue = localStorage.getItem("myKey"); console.log(nilai lokal); //"myValue" //hapus: localStorage.removeItem("myKey"); //hapus semua penyimpanan localStorage.clear() Sama, tetapi dengan tanda kurung siku: localStorage["Key"] = "Value" //set nilai localStorage["Key"] //Dapatkan nilai delete localStorage["Key" ] // Menghapus nilai

Saya juga ingin mencatat bahwa localStorage berfungsi baik dengan struktur bersarang, seperti objek.

//membuat objek var obj = ( item1: 1, item2: , item3:"halo" ); var serialObj = JSON.stringify(obj); //serialize itu localStorage.setItem("myKey", serialObj); //tulis ke penyimpanan dengan kunci "myKey" var returnObj = JSON.parse(localStorage.getItem("myKey")) //parsing kembali ke objek

Anda juga harus menyadari bahwa browser mengalokasikan 5MB ke penyimpanan lokal. Dan jika Anda melebihinya, Anda akan mendapatkan pengecualian QUOTA_EXCEEDED_ERR. Omong-omong, dengan bantuannya Anda dapat memeriksa apakah masih ada ruang di penyimpanan Anda.

Coba ( localStorage.setItem("key", "value"); ) catch (e) ( if (e == QUOTA_EXCEEDED_ERR) ( alert("Batas terlampaui"); ) )

Alih-alih kesimpulan

Saya ingin para pengembang menarik kesimpulan sederhana dari artikel singkat ini untuk diri mereka sendiri bahwa teknologi ini sudah dengan kekuatan dan main dapat digunakan dalam proyek Anda. Ini memiliki standarisasi yang baik dan dukungan yang sangat baik, yang hanya berkembang dari waktu ke waktu.