Karena HTTP tidak memiliki kewarganegaraan, siapa Anda? Apa yang kamu lakukan? Maaf, server tidak tahu.
Maka muncullah sesi yang menyimpan informasi pengguna di server untuk digunakan di masa mendatang (seperti nama pengguna, pembelian keranjang belanja, dll.).
Namun sesi tersebut bersifat sementara dan akan dihapus ketika pengguna meninggalkan situs web. Jika Anda ingin menyimpan informasi secara permanen, Anda dapat menyimpannya di database!
Cara kerja sesi: Buat id sesi (inti!!!) untuk setiap pengguna. Id sesi disimpan dalam cookie, yang berarti jika browser menonaktifkan cookie, sesi tersebut akan menjadi tidak valid! (Tetapi hal ini dapat dicapai dengan cara lain, seperti meneruskan id sesi melalui URL)
Otentikasi pengguna umumnya menggunakan sesi.
kue:Tujuan: Data disimpan secara lokal di sisi klien (biasanya dienkripsi) untuk situs web guna mengidentifikasi pengguna.
Cookie akan dibawa (walaupun tidak diperlukan) dalam permintaan http dari asal yang sama, yaitu diteruskan bolak-balik antara klien dan server!
Ukuran data cookie tidak melebihi 4k
Masa berlaku cookie: Masa berlaku cookie yang ditetapkan berlaku hingga waktu kedaluwarsa, meskipun browser ditutup!
Penyimpanan lokal & Penyimpanan sesi：Pada awalnya, cookie biasanya digunakan untuk caching lokal, namun penyimpanan web harus lebih aman dan cepat!
Data ini tidak disimpan di server (disimpan di klien) dan tidak mempengaruhi kinerja server!
Penyimpanan data sessionStorage dan localStorage juga memiliki batasan ukuran, tetapi ukurannya jauh lebih besar daripada cookie dan dapat mencapai 5 juta atau bahkan lebih besar!
localStorage: penyimpanan data tanpa batas waktu!
sessionStorage: Seperti dapat dilihat dari arti bahasa Inggris, ini adalah penyimpanan data sesi, jadi setelah pengguna menutup browser (tab/jendela), data tersebut dihapus!
Dukungan penyimpanan web HTML5:IE8 atau lebih tinggi, browser modern.
Data disimpan dalam pasangan nilai kunci:
LocalStorage dan sessionStorage memiliki metode berikut:
<!DOCTYPE html><html lang=en><head> <meta charset=UTF-8> <meta name=viewport content=width=device-width, initial-scale=1.0> <meta http-equiv=X-UA -Konten yang kompatibel=ie=Edge> <title>penyimpanan web</title></head><body> <div id=test></div> <script> if (typeof (Penyimpanan) != tidak ditentukan) { localStorage.name = 'xiao ming'; localStorage.setItem('name1', 'Apple'); document.getElementById('test').innerHTML = Anda adalah: + localStorage.name console.log; pertama: + localStorage.name1 + , + localStorage.key(0)); localStorage.removeItem('name1'); console.log(kedua: + localStorage.name1); console.log(ketiga: + localStorage.getItem('name')); localStorage.clear(); document.getElementById('test').innerHTML = Perbarui browser Anda! Saat ini browser tidak mendukung stroage; </script></body></html>Hasil program yang berjalan:
Catatan: Pasangan nilai kunci disimpan sebagai string, dan tipenya harus diubah sesuai kebutuhan (misalnya, untuk penambahan, ubah ke tipe Angka).
Tembolok Aplikasi HTML5:Dengan membuat file manifes cache, aplikasi web dapat di-cache dan diakses tanpa koneksi jaringan!
Keuntungan Cache Aplikasi:1. Penjelajahan offline;
2. Kecepatan lebih cepat: Sumber daya yang di-cache dimuat lebih cepat;
3. Kurangi beban browser: klien hanya akan mengunduh atau memperbarui sumber daya yang diubah dari server
Status dukungan:
IE10 atau lebih tinggi, browser modern.
menggunakan:
<!DOCTYPE html><html manifes=demo.appcache></html>
Catatan: Untuk mengaktifkan cache aplikasi, Anda perlu menentukan atribut manifes (ekstensi: .appcache); jika atribut manifes tidak ditentukan, halaman tidak akan di-cache (kecuali halaman tersebut secara langsung ditentukan dalam file manifes!)
File manifes harus dikonfigurasi dengan benar dengan tipe MIME: text/cache-manifest di server.
File manifes:Manifesnya adalah file teks sederhana yang memberi tahu browser apa yang di-cache dan apa yang tidak di-cache!
Manifes dapat dibagi menjadi tiga bagian:CACHE MANIFEST: File yang tercantum di sini akan di-cache setelah pengunduhan pertama!
JARINGAN: File yang tercantum dalam item ini memerlukan koneksi jaringan dengan server dan tidak akan di-cache!
FALLBACK: Item ini mencantumkan halaman fallback ketika halaman tidak dapat diakses (seperti: halaman 404)!
tes.appcache:
CACHE MANIFEST#2017 11 21 v10.0.1/test.css/logo.gif/main.jsNETWORK/login.php/register.phpFALLBACK#/html/Ketika file dalam direktori tidak dapat diakses, gunakan /offline.html sebagai ganti /html/ / offline.htmlPerbarui cache aplikasi:
1. Pengguna membersihkan cache browser!
2.File manifes diubah (#: menunjukkan komentar, dan jika diubah menjadi #2018 1 1 v20.0.0, browser akan melakukan cache ulang!)
3. Program memperbarui cache aplikasi!
Pekerja Web:Pekerja web adalah javascript yang berjalan di latar belakang, tidak bergantung pada skrip lain dan tidak akan memengaruhi kinerja halaman!
Saat menjalankan skrip pada halaman HTML umum, halaman tersebut tidak akan merespons kecuali skrip dimuat!
Dukungan: IE10 atau lebih tinggi, browser modern
Contoh: berkas html:
<!DOCTYPE html><html lang=en><head> <meta charset=UTF-8> <meta name=viewport content=width=device-width, initial-scale=1.0> <meta http-equiv=X-UA -Konten yang kompatibel=ie=edge> <title>pekerja web</title></head><body> <p>Jumlah: <output id=count></output></p> <button onclick=startWorker()>Mulai</button> <button onclick=overWorker()>End</button> <script> var w; function startWorker(){ // Periksa apakah browser mendukung pekerja web if(typeof(Worker) !=='tidak terdefinisi'){ if(typeof(w)=='undefinisi'){ //Membuat objek pekerja web w=Pekerja Baru('testWorker.js'); Acara terus didengarkan (meskipun skrip eksternal telah selesai) kecuali dihentikan w.onmessage=function(event){ document.getElementById('count').innerHTML=event.data }; ('count' ).innerHTML='Browser tidak mendukung pekerja web'; } } function overWorker() { // Hentikan web Objek pekerja, melepaskan sumber daya browser/komputer w.terminate(); w=undefinisi;berkas testWorker.js:
var i=0;function timedCount() { i+=1; //Bagian yang penting, kembalikan sepotong informasi ke halaman html postMessage(i); setTimeout('timedCount()',500);}timedCount();Catatan 1: Biasanya pekerja web tidak digunakan untuk tugas-tugas sederhana seperti itu, tetapi untuk tugas-tugas yang menghabiskan lebih banyak sumber daya CPU!
Catatan 2: Menjalankan chrome akan menyebabkan kesalahan "tidak dapat diakses dari asal 'null'". Solusi saya adalah: buka Apache di xampp dan gunakan http://localhost/ untuk mengakses.
kerugian pekerja web:Karena pekerja web terletak di file eksternal, ia tidak dapat mengakses objek javascript berikut:
Acara yang dikirim ke server adalah transfer informasi satu arah; halaman web dapat secara otomatis memperoleh pembaruan dari server!
Sebelumnya: Halaman web pertama kali menanyakan apakah ada pembaruan yang tersedia, server mengirimkan data, dan pembaruan dilakukan (transfer data dua arah)!
Status dukungan: Semua browser modern kecuali IE mendukungnya!
Contoh kode: file html:
<!DOCTYPE html><html lang=en><head> <meta charset=UTF-8> <meta name=viewport content=width=device-width, initial-scale=1.0> <meta http-equiv=X-UA -Konten yang kompatibel=ie=Edge> <title>memutuskan peristiwa terkirim</title></head><body> <p>memutuskan informasi peristiwa terkirim</p> <div id=test></div> <script> // Menentukan apakah browser mendukung EventSource if(typeof(EventSource)!==undefinisi){ // Membuat objek EventSource var source=new EventSource(test.php); Dengarkan Acara source.onmessage=function(event){ document.getElementById('test').innerHTML+=event.data+<br> }else{ document.getElementById('test').innerHTML=maaf, browser tidak mendukung acara yang dikirim server;tes.php：
<?phpheader('Content-Type:text/event-stream');header('Cache-Control:no-cache');$time=date('r');echo data:Waktu server adalah: {$ time} /n/n;// Segarkan data keluaran flush();Catatan: Tidak ada konten di belakang, file php dapat dihilangkan?> Tutup!
Soket Web HTML5:WebSocket dapat digunakan untuk komunikasi antar banyak tab!
Di atas adalah keseluruhan isi artikel ini, saya harap dapat bermanfaat untuk pembelajaran semua orang. Saya juga berharap semua orang mendukung VeVb Wulin Network.