Panduan HTML5 - 5. Gunakan penyimpanan web untuk menyimpan data pasangan nilai kunci

Penulis：Eve Cole Waktu Pembaruan：2025-04-11 13:00:04

Konten pelajaran ini adalah untuk memperkenalkan penyimpanan web, yang menggunakannya untuk menyimpan data pasangan nilai kunci di browser. Secara fungsional seperti cookie sebelumnya, tetapi lebih baik dan data yang disimpan bisa lebih besar. Ada dua jenis penyimpanan web: penyimpanan lokal dan penyimpanan sesi, yang menggunakan mekanisme implementasi yang sama, kecuali bahwa visibilitas dan siklus hidup berbeda.

1. Gunakan penyimpanan lokal

Kami menggunakan objek LocalStorage untuk mengakses penyimpanan lokal, yang mengembalikan objek penyimpanan, yang digunakan untuk menyimpan data pasangan nilai kunci. Ini memiliki sifat dan metode berikut:

clear (): jelas menyimpan data pasangan nilai kunci;

getItem (<yyy>): Dapatkan nilai melalui tombol;

key (<sewic>): Dapatkan nilai kunci melalui indeks;

Panjang: Mengembalikan jumlah pasangan nilai kunci;

RemoveItem (<yyy>): Hapus data yang ditentukan melalui tombol;

setItem (<yyy>, <value>): Tambahkan pasangan nilai-kunci. Ketika pasangan nilai kunci dari kunci yang ditentukan ada, operasi pembaruan diimplementasikan;

[<yyy>]: Gunakan tombol untuk mendapatkan nilai yang ditentukan melalui array subscript.

Objek penyimpanan memungkinkan kami untuk menyimpan data pasangan nilai kunci dalam bentuk string. Kuncinya unik, yang berarti bahwa ketika kita menggunakan metode setItem untuk menambahkan pasangan nilai kunci, jika nilai kunci sudah ada, operasi pembaruan akan diimplementasikan. Mari kita lihat contoh berikut:

<! Doctype html>

<Html>

<head>

<Title> Contoh </iteme>

<tyle>

tubuh> *{float: left;}

Tabel {Border-Collapse: Collapse; margin-left: 50px;}

th, td {padding: 4px;}

th {text-align: right;}

input {border: tipis solid hitam; padding: 2px;}

Label {min-lebar: 50px; display: inline-block; text-align: right;}

#countmsg, #buttons {margin-left: 50px; margin-top: 5px; margin-bottom: 5px;}

</tyle>

</head>

<body>

<div>

<div>

<label> Nilai: </label> <input id = "value" placeholder = "enter value"/> </div>

<tombol id = "add"> Tambahkan </button>

</div>

</div>

<tr>

<th> hitungan item: </th>

</tr>

</boable>

displayData ();

var tombol = document.geteLementsByTagname ('tombol');

untuk (var i = 0; i <buttons.length; i ++) {

tombol [i] .onClick = standebuttonpress;

}

function standebuttonpress (e) {

switch (e.target.id) {

kasus 'tambahkan':

var key = document.getElementById ('key'). value;

var value = document.geteLementById ('value'). value;

localstorage.setitem (kunci, nilai);

merusak;

kasus 'jelas':

localstorage.clear ();

merusak;

}

displayData ();

}

function displayData () {

var tableElement = document.geteLementById ('data');

TableElement.innerHtml = '';

var itemcount = localstorage.length;

document.geteLementById ('count'). innerHtml = itemCount;

untuk (var i = 0; i <itemcount; i ++) {

var key = localstorage.key (i);

var val = localstorage.getItem (key);

TableElement.InnerHtMl + = '<tr> <t th>' + key + ': </t> <td>' + val + '</td> </tr>';

}

</script>

</body>

</html>

Mari kita lihat hasil berjalan :

Browser tidak dapat menghapus data yang kami buat melalui LocalStorage kecuali pengguna menghapusnya.

2. Dengarkan acara penyimpanan

Data yang disimpan melalui penyimpanan lokal terlihat oleh dokumen yang sama-sama. Misalnya, jika Anda membuka dua browser chrome untuk mengakses alamat URL yang sama, penyimpanan lokal yang dibuat pada halaman apa pun juga terlihat oleh halaman lain. Namun, jika Anda membuka alamat URL yang sama dengan browser lain (seperti Firefox), penyimpanan lokal tidak terlihat karena mereka memiliki sumber yang berbeda. Acara penyimpanan digunakan untuk mendengarkan perubahan konten penyimpanan. Mari kita lihat properti mana yang dikandungnya:

Kunci: Mengembalikan nilai kunci yang diubah;

OldValue: Mengembalikan nilai sebelum perubahan nilai kunci;

NewValue: Mengembalikan nilai nilai baru yang nilai kuncinya telah berubah;

URL: Alamat URL yang telah berubah;

Storagearea: Mengembalikan objek penyimpanan yang diubah (penyimpanan lokal atau penyimpanan sesi).

Mari kita lihat contoh di bawah ini:

<! Doctype html>

<Html>

<head>

<title> penyimpanan </iteme>

<tyle>

Tabel {Border-Collapse: Collapse;}

th, td {padding: 4px;}

</tyle>

</head>

<body>

<tr>

<th> kunci </t>

<t th> oldvalue </th>

<t th> newValue </th>

<TH> Storagearea </t>

</tr>

</boable>

var tableElement = document.geteLementById ('data');

window.onstorage = function (e) {

var row = '<tr>';

baris + = '<td>' + e.key + '</td>';

baris + = '<td>' + e.olevalue + '</td>';

baris + = '<td>' + e.newValue + '</td>';

baris + = '<td>' + e.url + '</td>';

baris + = '<td>' + (e.storagearea == localstorage) + '</td> </tr>';

TableElement.InnerHTML += ROW;

}

</script>

</body>

</html>

Dalam Contoh 1, kami menambahkan, menghapus, dan memodifikasi data penyimpanan, dan akan ditampilkan pada Contoh 2 halaman. Contoh 2 berjalan secara normal di browser Chrome, Firefox tidak merespons, dan browser lainnya tidak mengujinya.

Hasil Menjalankan :

3. Gunakan Penyimpanan Sesi

Penyimpanan sesi sama dengan penyimpanan lokal yang digunakan, kecuali bahwa aksesibilitasnya terbatas pada halaman saat ini, dan akan hilang setelah halaman ditutup. Kami mengaksesnya melalui SesiStorage.

<! Doctype html>

<Html>

<head>

<Title> Contoh </iteme>

<tyle>

tubuh> *{float: left;}

Tabel {Border-Collapse: Collapse; margin-left: 50px;}

th, td {padding: 4px;}

th {text-align: right;}

input {border: tipis solid hitam; padding: 2px;}

Label {min-lebar: 50px; display: inline-block; text-align: right;}

#countmsg, #buttons {margin-left: 50px; margin-top: 5px; margin-bottom: 5px;}

</tyle>

</head>

<body>

<div>

<div>

<label> Nilai: </label> <input id = "value" placeholder = "enter value"/> </div>

<tombol id = "add"> Tambahkan </button>

</div>

</div>

<tr>

<th> hitungan item: </th>

</tr>

</boable>

displayData ();

var tombol = document.geteLementsbyTagname ("tombol");

untuk (var i = 0; i <buttons.length; i ++) {

tombol [i] .onClick = standebuttonpress;

}

function standebuttonpress (e) {

switch (e.target.id) {

kasus 'tambahkan':

var key = document.geteLementById ("key"). nilai;

var value = document.geteLementById ("value"). value;

sessionStorage.setItem (kunci, nilai);

merusak;

kasus 'jelas':

sessionStorage.clear ();

merusak;

}

displayData ();

}

function displayData () {

var tableElement = document.geteLementById ('data');

TableElement.innerHtml = '';

var itemcount = sessionStorage.length;

document.geteLementById ('count'). innerHtml = itemCount;

untuk (var i = 0; i <itemcount; i ++) {

var key = sessionStorage.key (i);

var val = sessionStorage.getItem (key);

TableElement.InnerHtml + = "<tr> <t th>" + key + ": </t> <td>" + val + "</td> </tr>";

}

</script>

</body>

</html>

Efek Menjalankan :

Jika Anda membuat perubahan dalam Contoh 3, halaman dalam Contoh 2 tidak akan berubah.

Ringkas :

SessionStorage digunakan untuk menyimpan data dalam sesi secara lokal, yang hanya dapat diakses pada halaman dalam sesi yang sama dan data akan dihancurkan setelah sesi selesai. Oleh karena itu, Sesi Sesi bukanlah penyimpanan lokal yang persisten, tetapi hanya penyimpanan tingkat sesi.

LocalStorage digunakan untuk penyimpanan lokal yang persisten, dan data tidak akan pernah kedaluwarsa kecuali dihapus secara aktif.

Perbedaan antara penyimpanan web dan cookie: Konsep penyimpanan web mirip dengan cookie, perbedaannya adalah dirancang untuk penyimpanan kapasitas yang lebih besar. Ukuran cookie terbatas, dan setiap kali Anda meminta halaman baru, cookie akan dikirim, yang tanpa terlihat membuang -buang bandwidth. Selain itu, cookie perlu ditentukan ruang lingkup dan tidak dapat dipanggil lintas domain. Selain itu, penyimpanan web memiliki setItem, getItem, removeItem, jelas dan metode lainnya. Tidak seperti cookie, pengembang front-end perlu merangkum setcookies dan getcookies sendiri. Juga, setiap domain (termasuk subdomain) penyimpanan web memiliki ruang penyimpanan independen, dan setiap ruang penyimpanan sepenuhnya independen, sehingga tidak akan menyebabkan kebingungan data.

Tetapi cookie juga sangat diperlukan: fungsi cookie adalah untuk berinteraksi dengan server dan ada sebagai bagian dari spesifikasi HTTP, sementara penyimpanan web hanya dibuat untuk menyimpan data secara lokal.

Unduh kode sumber