Bagaimanakah Saya Boleh Menyimpan Imej ke LocalStorage dan Memaparkannya pada Halaman Baharu?

Menyimpan Imej ke LocalStorage dan Memaparkannya pada Halaman Baharu

Apabila bekerja dengan borang web, selalunya perlu untuk mengendalikan muat naik imej dan simpannya untuk paparan kemudian. Artikel ini menyediakan penyelesaian menyeluruh untuk memuat naik imej, menyimpannya ke localStorage dan memaparkannya pada halaman seterusnya.

Memuat Naik dan Memaparkan Imej

Untuk memuat naik dan paparkan imej pada halaman semasa, gunakan medan input HTML dengan atribut jenis ditetapkan kepada 'fail' dan pengendali acara onchange yang memanggil fungsi readURL. Fungsi ini harus menggunakan API FileReader untuk membaca fail imej yang dipilih dan memaparkannya pada halaman menggunakan atribut src elemen imej.

Menyimpan Imej ke LocalStorage

Setelah pengguna mengisi borang yang lain dan mengklik butang 'Simpan', simpan semua input borang, termasuk imej, sebagai rentetan Storan setempat. Untuk menyimpan imej, gunakan fungsi getElementById untuk mendapatkan elemen imej pada halaman, tukarkannya kepada rentetan Base64 menggunakan fungsi seperti yang disediakan dalam respons dan simpan rentetan sebagai nilai LocalStorage.

Memaparkan Imej pada Halaman Baharu

Pada halaman seterusnya, cipta imej dengan atribut src kosong. Apabila halaman dimuatkan, gunakan fungsi localStorage.getItem untuk mendapatkan semula rentetan Base64 imej daripada localStorage dan gunakannya pada atribut src imej menggunakan data:image/png;base64, awalan untuk menunjukkan format data imej.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Menyimpan Imej ke LocalStorage dan Memaparkannya pada Halaman Baharu?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!