Ketahui tentang storan penyemak imbas dan kaedah caching dalam JavaScript

Fahami storan penyemak imbas dan kaedah caching dalam JavaScript
Dalam pembangunan web, storan penyemak imbas dan fungsi caching adalah sangat penting. Mereka meningkatkan pengalaman pengguna, mengurangkan permintaan rangkaian dan meningkatkan kelajuan pemuatan halaman. Dalam artikel ini, kami akan membincangkan storan penyemak imbas biasa dan kaedah caching dalam JavaScript dan memberikan contoh kod khusus.

1. Kuki
Kuki ialah cara pelayar menyimpan data. Ia membenarkan pelayan web menyimpan sejumlah kecil data dalam penyemak imbas dan kemudian menghantarnya ke pelayan atas permintaan seterusnya. Berikut ialah contoh kod untuk menetapkan dan mendapatkan Cookie:

// Set Cookie
document.cookie = "username=John Doe; expires=Sab, 31 Dis 2022 00:00:00 UTC; path=/";

// Dapatkan Cookie
fungsi getCookie(nama) {
var cookieArr = document.cookie.split("; ");
untuk(var i = 0; i

var cookiePair = cookieArr[i].split("=");
if(name === cookiePair[0]) {
  return decodeURIComponent(cookiePair[1]);
}

}
kembali null ;
}

var username = getCookie("username");

2. LocalStorage
LocalStorage ialah kaedah baharu untuk penyemak imbas menyimpan data dalam HTML5. Ia boleh menyimpan data dalam penyemak imbas untuk masa yang lama, walaupun pengguna menutup penyemak imbas atau memulakan semula komputer, data itu akan tetap ada. Berikut ialah contoh kod untuk menetapkan dan mendapatkan LocalStorage:

// Set LocalStorage
localStorage.setItem("nama pengguna", "John Doe");

// Dapatkan LocalStorage
var nama pengguna = localStorage.getItem("nama pengguna"); ) ;

//Delete LocalStorage
localStorage.removeItem("username");

3. SessionStorage
SessionStorage ialah kaedah untuk penyemak imbas menyimpan data yang serupa dengan LocalStorage, tetapi ia hanya sah dalam sesi semasa. Apabila pengguna menutup tab penyemak imbas atau penyemak imbas, data dalam SessionStorage akan dikosongkan. Berikut ialah contoh kod untuk menetapkan dan mendapatkan SessionStorage:

//Set SessionStorage
sessionStorage.setItem("username", "John Doe");

//Get SessionStorage
var username = sessionStorage.getItem("username" ) ;

//Delete SessionStorage
sessionStorage.removeItem("username");

4 IndexedDB
IndexedDB ialah kaedah penyimpanan pangkalan data penyemak imbas lanjutan yang boleh menyimpan sejumlah besar data berstruktur dalam penyemak imbas. Tidak seperti LocalStorage dan SessionStorage, IndexedDB membenarkan pembangun mencipta berbilang pangkalan data dan melaksanakan operasi data yang kompleks. Berikut ialah contoh kod menggunakan IndexedDB:

//Buka pangkalan data
var request = window.indexedDB.open("myDatabase", 1);

request.onupgradeneeded = function(event) {
var db = event. target .result;
var objectStore = db.createObjectStore("customers", { keyPath: "id" });
};

// Tambah data
request.onsuccess = function(event) {
var db = event. target .result;
var transaction = db.transaction(["customers"], "readwrite");
var objectStore = transaction.objectStore("customers");
var customer = { id: 1, name: "John Doe " };
var request = objectStore.add(customer);

request.onsuccess = function(event) {

console.log("Data added successfully");

};
};

Di atas ialah beberapa kaedah storan dan caching penyemak imbas biasa, termasuk Cookie, LocalStorage , SessionStorage dan IndexedDB. Memilih kaedah yang sesuai untuk menyimpan dan mendapatkan data berdasarkan keperluan dan senario tertentu boleh meningkatkan pengalaman pengguna dan prestasi halaman web. Walau bagaimanapun, perlu diingatkan bahawa keselamatan data dan perlindungan privasi harus diberi perhatian apabila menggunakan kaedah ini.

Atas ialah kandungan terperinci Ketahui tentang storan penyemak imbas dan kaedah caching dalam JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!