Rumah > hujung hadapan web > Soal Jawab bahagian hadapan > Kod tetapan pemulihan Javascript: tetapan kilang satu klik

Kod tetapan pemulihan Javascript: tetapan kilang satu klik

PHPz
Lepaskan: 2023-04-14 15:36:00
asal
831 orang telah melayarinya

Dengan populariti peranti mudah alih dan komputer, kehidupan kita tidak dapat dipisahkan daripada produk elektronik ini. Sama ada di pejabat atau di rumah, kita semua perlu menggunakan pelbagai alat perisian untuk menyelesaikan kerja dan hiburan. Walau bagaimanapun, kadangkala kami mungkin perlu melakukan tetapan pemulihan satu klik pada perisian atau peranti tertentu untuk memulihkan keadaan kerja biasa.

Javascript ialah bahasa pengaturcaraan yang digunakan secara meluas untuk pembangunan bahagian hadapan Web, dan dalam JavaScript, terdapat banyak teknik praktikal yang boleh membantu kami mencapai fungsi memulihkan tetapan dengan satu klik. Dalam artikel ini, kami akan memperkenalkan cara menggunakan Javascript untuk melaksanakan tetapan semula kilang satu klik.

1. Apakah itu Javascript?

JavaScript ialah bahasa skrip yang ditafsirkan berasaskan prototaip yang merupakan bahasa bahagian hadapan yang sangat biasa digunakan untuk menambah dinamik dan interaktiviti pada penyemak imbas web. JavaScript telah dicipta pada tahun 1995 oleh Brendan Eich, yang merupakan seorang pengaturcara di Netscape.

Ciri utama Javascript ialah: mudah dipelajari dan digunakan, pengenalan sintaks, struktur, kebolehbacaan, dsb. Ia boleh digunakan bersama dengan HTML dan CSS untuk memberikan kesan dinamik, pengesahan borang dan fungsi lain untuk halaman web.

2. Javascript merealisasikan fungsi memulihkan tetapan

Dalam Javascript, kita boleh menulis kod kita sendiri mengikut keperluan kita untuk merealisasikan fungsi memulihkan tetapan. Seterusnya, kami akan memperkenalkan dua kaedah pelaksanaan biasa: menggunakan Cookies dan menggunakan LocalStorage.

  1. Menggunakan Kuki

Kaedah tetapan pemulihan menggunakan Kuki terutamanya menggunakan fungsi Kuki pelayar untuk menyimpan maklumat konfigurasi pengguna. Kodnya adalah seperti berikut:

//Tetapkan Kuki
fungsi setCook(nama, nilai, tamat tempoh, laluan, domain, selamat) {

var cookie = encodeURIComponent(name) + "=" + encodeURIComponent(value);
expires && (cookie += ";expires=" + new Date(expires).toGMTString());
path && (cookie += ";path=" + path);
domain && (cookie += ";domain=" + domain);
secure && (cookie += ";secure");
document.cookie = cookie;
Salin selepas log masuk

}

// Dapatkan Kuki
fungsi getCook(nama) {

var cookie = {};
var all = document.cookie;
if (all === "") {
    return cookie;
}
var list = all.split(";");
for (var i = 0; i < list.length; i++) {
    var c = list[i];
    var p = c.indexOf("=");
    var n = p > -1 ? c.substr(0, p) : c;
    var v = p > -1 ? decodeURIComponent(c.substr(p + 1)) : "";
    cookie[n.trim()] = v;
}
return name ? cookie[name] : cookie;
Salin selepas log masuk

}

//Lakukan tetapan pemulihan
function resetSetting() {

setCook('my_setting', null, -1, '/');
alert('已经恢复到默认设置!');
Salin selepas log masuk

}

Nota: Dalam kaedah ini, kami menggunakan fungsi setCook() dan getCook() untuk menetapkan dan mendapatkan Cookie masing-masing. Dalam fungsi resetSetting(), kita boleh menggunakan fungsi setCook() untuk memadam kuki dan memulihkannya kepada tetapan lalai.

  1. Gunakan LocalStorage untuk mencapai

Kaedah tetapan pemulihan menggunakan LocalStorage terutamanya menggunakan fungsi storan setempat penyemak imbas untuk menyimpan maklumat konfigurasi pengguna. Kodnya adalah seperti berikut:

//Set LocalStorage
function setLocalStorage(key, value) {

if (window.localStorage) {
    window.localStorage.setItem(key, value);
} else {
    alert("您的浏览器不支持localStorage!");
}
Salin selepas log masuk

}

//Get LocalStorage
function getLocalStorage( kunci) {

if (window.localStorage) {
    return window.localStorage.getItem(key);
} else {
    alert("您的浏览器不支持localStorage!");
    return "";
}
Salin selepas log masuk

}

//Lakukan tetapan pemulihan
function resetSetting() {

localStorage.removeItem('my_setting');
alert('已经恢复到默认设置!');
Salin selepas log masuk

}

Nota: Dalam kaedah ini, kami menggunakan fungsi setLocalStorage() dan getLocalStorage() untuk menetapkan dan mendapatkan LocalStorage masing-masing. Dalam fungsi resetSetting(), kita boleh menggunakan fungsi removeItem() LocalStorage untuk memadam maklumat konfigurasi dan memulihkannya kepada tetapan lalai.

3. Ringkasan

Melalui kaedah di atas, kita boleh menggunakan Javascript untuk merealisasikan fungsi tetapan pengembalian kilang satu klik. Sama ada menggunakan Cookies atau LocalStorage, kedua-duanya adalah kaedah yang sangat praktikal. Sama ada anda sedang membangunkan aplikasi web atau menulis halaman web, petua ini boleh membantu anda melakukan kerja anda dengan lebih baik.

Sudah tentu, kami juga perlu memberi perhatian kepada beberapa isu keselamatan, seperti mengesahkan kandungan yang dimasukkan oleh pengguna untuk mengelak daripada diserang. Pada masa yang sama, jika kami perlu memastikan keserasian kod, kami juga perlu menjalankan beberapa ujian keserasian penyemak imbas untuk memastikan kod yang kami tulis boleh berjalan dengan betul pada pelbagai pelayar popular.

Akhir sekali, jika anda ingin mempelajari lebih lanjut Javascript atau bahasa pengaturcaraan lain, anda boleh merujuk beberapa sumber pembelajaran berkaitan untuk mempelajari teknologi berkaitan dengan lebih sistematik.

Atas ialah kandungan terperinci Kod tetapan pemulihan Javascript: tetapan kilang satu klik. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan