Panduan HTML5-5. Gunakan storan web untuk menyimpan petua tutorial data_html5 pasangan nilai kunci-Tutorial H5-php.cn

Rumah

hujung hadapan web

Tutorial H5

Panduan HTML5-5. Gunakan storan web untuk menyimpan petua tutorial data_html5 pasangan nilai kunci

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:50 PM

storage penyimpanan

Kandungan pelajaran ini adalah untuk memperkenalkan storan web, yang digunakan untuk menyimpan data pasangan nilai kunci dalam penyemak imbas Ia berfungsi seperti kuki sebelumnya, tetapi ia lebih baik dan boleh menyimpan data yang lebih besar. Terdapat dua jenis storan web: storan tempatan dan storan sesi Mereka menggunakan mekanisme pelaksanaan yang sama, tetapi mempunyai keterlihatan dan kitaran hayat yang berbeza.
1. Gunakan storan tempatan
Kami menggunakan objek localStorage untuk mengakses storan setempat Ia mengembalikan objek Storan digunakan untuk menyimpan data pasangan nilai kunci kaedah:
clear(): Kosongkan data pasangan nilai kunci yang disimpan;
getItem(): Dapatkan nilai melalui kunci;
key(): Dapatkan nilai kunci melalui indeks;
panjang: Mengembalikan bilangan pasangan nilai kunci; : Menambah pasangan nilai kunci, Apabila pasangan nilai kunci bagi kunci yang ditentukan wujud, operasi kemas kini dilaksanakan;
Objek storan membolehkan kami menyimpan data pasangan nilai kunci dalam bentuk rentetan Kuncinya adalah unik, yang bermaksud apabila kami menggunakan kaedah setItem untuk menambah pasangan nilai kunci, jika nilai kunci sudah wujud, ia. akan dikemas kini operasi. Mari lihat contoh berikut:

Salin kod

Kodnya adalah seperti berikut:

< !DOCTYPE HTML>

: kiri;}

jadual{border-collapse: collapse;margin-left: 50px;}
th, td{padding: 4px;}
th{text-align: right;}
input {sempadan: hitam pepejal nipis; padding: 2px;}
label{min-width: 50px;display: inline-block;text-align: right;}
#countmsg, #buttons{margin-left: 50px ;margin-top : 5px;margin-bottom: 5px;}

;
Kunci:

;Nilai:< ;/label>

="tambah" >Tambah
Terdapat item

>Bilangan Item:
displayData();
butang var = document.getElementsByTagName('button'); ; i ) {
butang[i].onclick = handleButtonPress;
}
function handleButtonPress(e) {
suis (e.target.id) {
huruf 'tambah':
var key = document.getElementById('key').value;
var value = document.getElementById('value').value;
localStorage.setItem(key, value);
kes 'clear':
localStorage.clear();
break;
}
displayData();
}
function displayData() {
var tableElement = document.getElementById ('data');
tableElement.innerHTML = '';
var itemCount = localStorage.length;
document.getElementById('count').innerHTML = itemCount; (var i = 0; i < itemCount; i ) {
var key = localStorage.key(i);
var val = localStorage.getItem(key); tr>< kekunci ':' val ''
}
}
/skrip
< ;/body>

Mari kita lihat keputusan larian:

Pelayar tidak boleh memadamkan data yang kami buat melalui localStorage melainkan pengguna memadamkannya.
2. Dengarkan acara Storan
Data yang disimpan melalui storan setempat kelihatan kepada dokumen daripada sumber yang sama Contohnya, jika anda membuka dua penyemak imbas chrome untuk mengakses alamat URL yang sama, pada mana-mana halaman Storan tempatan yang dibuat pada halaman juga boleh dilihat oleh halaman lain. Walau bagaimanapun, jika anda menggunakan penyemak imbas lain (seperti Firefox) untuk membuka alamat URL yang sama, storan setempat tidak akan kelihatan kerana ia mempunyai sumber yang berbeza. Peristiwa Penyimpanan digunakan untuk memantau perubahan dalam kandungan storan. Mari lihat atribut apa yang terkandung di dalamnya:
kunci: Mengembalikan nilai kunci yang telah diubah: Nilai lama: Mengembalikan nilai sebelum nilai kunci ditukar; : Mengembalikan nilai baharu bagi nilai kunci yang telah diubah;
url: Alamat url yang diubah;
Mari kita lihat contoh di bawah:

Salin kod

Kodnya adalah seperti berikut:

- runtuh: runtuh }
ke, td{padding: 4px;}

data" border=" 1">

key
oldValue
newValue< ke>
url 🎜>var tableElement = document.getElementById('data');
window.onstorage = fungsi (e) {
var row = ''; e.kunci '';
baris = '' e.oleValue ''; /td>';
baris = '' e.url ''; td>';
tableElement.innerHTML = baris
}
🎜>
Data yang kami tambah, padam dan storan yang diubah suai dalam Contoh 1 akan dipaparkan pada halaman Contoh 2. Contoh 2 berjalan seperti biasa dalam penyemak imbas Chrome, tetapi Firefox tidak bertindak balas Penyemak imbas lain belum diuji.

Hasil jalankan
:

3. Gunakan storan sesi
Storan sesi digunakan sama seperti storan tempatan, kecuali kebolehaksesannya terhad kepada halaman semasa dan ia akan hilang selepas halaman ditutup.

Salin kod

Kod tersebut adalah seperti berikut:

Contoh

badan > *{float: left;}
jadual{border-collapse: collapse;margin-left: 50px;}
th, td{padding: 4px;}
th{text-align: right;}
masukan{sempadan: hitam pepejal nipis;lapik: 2px;}
label{lebar-min: 50px;paparan: blok sebaris;sejajarkan teks: kanan;}
#countmsg, #buttons{margin- kiri: 50px;margin-atas: 5px;margin-bawah: 5px;}

Kunci:

Nilai:

Terdapat item

displayData();
butang var = document.getElementsByTagName("butang");
untuk (var i = 0; i < buttons.length; i ) {
butang[i].onclick = handleButtonPress;
}
function handleButtonPress(e) {
switch (e.target.id) {
case 'add':
var key = document.getElementById("key").value;
var value = document.getElementById("value").value;
sessionStorage.setItem(kunci, nilai);
pecah;
kes 'clear':
sessionStorage.clear();
pecah;
}
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 = "";
}
}

运行效果：

你在例3中做任何修改，例2的页面不会发生任何改变。
总结总结localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。
simpanan web和kuki的区别：匫王中的区别：匫网的区别：匫王的公一一一一一一远不会过期的。是它是为了更大容量存储设计的。Cookie的大小是受限的，并且每次你请求一个新的页面的时候Cookie都会被发送过去，这样无形中中中文需要指定作用域，不可以跨域调用。除此之外，Storan Web拥有setItem,getItem,removeItem,clear等方法，不像cookie需要前端开发者自己封装setCookie，getCookie。还有，还有，simpanan web柏个柏个立的存储空间，各个存储空间是完全独立的，因此不会造成数据混乱。
但是Cookie也是不可以或缺的：Cookie的作用是与服务器二进行中可一部分而存在，而 Storan Web仅仅是为了在本地“存储”数据而生。

源码下载

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

Alat AI Hot

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Penyingkiran pakaian AI

Video Face Swap

Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!

Tunjukkan Lagi

Artikel Panas

Assassin's Creed Shadows: Penyelesaian Riddle Seashell

3 minggu yang lalu By DDD

Apa yang Baru di Windows 11 KB5054979 & Cara Memperbaiki Masalah Kemas Kini

2 minggu yang lalu By DDD

Assassin's Creed Shadows - Cara Mencari Orang Panda

1 bulan yang lalu By DDD

Di mana untuk mencari kad kunci kawalan kren di atomfall

3 minggu yang lalu By DDD

<🎜>: Rails Dead - Cara Melengkapkan Setiap Cabaran

3 minggu yang lalu By DDD

Tunjukkan Lagi

Alat panas

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Tunjukkan Lagi

Topik panas

Di manakah pintu masuk log masuk untuk e-mel gmail?

7644

Tutorial CakePHP

1392

Apakah format nama akaun stim

kunci pengaktifan win11 kekal

Sambungan NYT menunjukkan dan jawapan

151

Tunjukkan Lagi

Related knowledge

Huawei akan melancarkan produk storan MED yang inovatif tahun depan: kapasiti rak melebihi 10 PB dan penggunaan kuasa kurang daripada 2 kW Mar 07, 2024 pm 10:43 PM

Laman web ini melaporkan pada 7 Mac bahawa Dr. Zhou Yuefeng, Presiden Barisan Produk Penyimpanan Data Huawei, baru-baru ini menghadiri persidangan MWC2024 dan secara khusus menunjukkan penyelesaian penyimpanan magnetoelektrik OceanStorArctic generasi baharu yang direka untuk data hangat (WarmData) dan data sejuk (ColdData). Zhou Yuefeng, Presiden barisan produk penyimpanan data Huawei, mengeluarkan satu siri penyelesaian inovatif Sumber imej: Siaran akhbar rasmi Huawei yang dilampirkan pada tapak ini adalah seperti berikut: Kos penyelesaian ini adalah 20% lebih rendah daripada pita magnetik. penggunaan kuasa adalah 90% lebih rendah daripada cakera keras. Menurut bloksandfiles media teknologi asing, jurucakap Huawei turut mendedahkan maklumat tentang penyelesaian storan magnetoelektrik: Cakera magnetoelektronik (MED) Huawei ialah inovasi utama dalam media storan magnetik. Generasi pertama ME

Kemahiran pembangunan Vue3+TS+Vite: cara menyulitkan dan menyimpan data Sep 10, 2023 pm 04:51 PM

Petua pembangunan Vue3+TS+Vite: Cara menyulitkan dan menyimpan data Dengan perkembangan pesat teknologi Internet, keselamatan data dan perlindungan privasi menjadi semakin penting. Dalam persekitaran pembangunan Vue3+TS+Vite, cara menyulitkan dan menyimpan data adalah masalah yang perlu dihadapi oleh setiap pembangun. Artikel ini akan memperkenalkan beberapa teknik penyulitan dan storan data biasa untuk membantu pembangun meningkatkan keselamatan aplikasi dan pengalaman pengguna. 1. Penyulitan Data Penyulitan Data Bahagian Hadapan Penyulitan Bahagian Hadapan ialah bahagian penting dalam melindungi keselamatan data. Biasa digunakan

Cara mengosongkan cache pada Windows 11: Tutorial terperinci dengan gambar Apr 24, 2023 pm 09:37 PM

Apakah cache? Cache (sebutan ka·shay) ialah komponen perkakasan atau perisian berkelajuan tinggi khusus yang digunakan untuk menyimpan data dan arahan yang kerap diminta, yang seterusnya boleh digunakan untuk memuatkan tapak web, aplikasi, perkhidmatan dan aspek lain bahagian sistem dengan lebih pantas. . Caching menjadikan data yang paling kerap diakses tersedia. Fail cache tidak sama dengan memori cache. Fail cache merujuk kepada fail yang kerap diperlukan seperti PNG, ikon, logo, shader, dsb., yang mungkin diperlukan oleh berbilang program. Fail ini disimpan dalam ruang pemacu fizikal anda, biasanya tersembunyi. Memori cache, sebaliknya, adalah sejenis memori yang lebih pantas daripada memori utama dan/atau RAM. Ia sangat mengurangkan masa capaian data kerana ia lebih dekat dengan CPU dan lebih pantas berbanding dengan RAM

Proses pemasangan Git pada Ubuntu Mar 20, 2024 pm 04:51 PM

Git ialah sistem kawalan versi teragih yang pantas, boleh dipercayai dan boleh disesuaikan. Ia direka bentuk untuk menyokong aliran kerja bukan linear teragih, menjadikannya ideal untuk pasukan pembangunan perisian dari semua saiz. Setiap direktori kerja Git ialah repositori bebas dengan sejarah lengkap semua perubahan dan keupayaan untuk menjejak versi walaupun tanpa akses rangkaian atau pelayan pusat. GitHub ialah repositori Git yang dihoskan pada awan yang menyediakan semua ciri kawalan semakan yang diedarkan. GitHub ialah repositori Git yang dihoskan pada awan. Tidak seperti Git yang merupakan alat CLI, GitHub mempunyai antara muka pengguna grafik berasaskan web. Ia digunakan untuk kawalan versi, yang melibatkan kerjasama dengan pembangun lain dan menjejaki perubahan pada skrip dan

Cara menggunakan sessionStorage dengan betul untuk melindungi data sensitif Jan 13, 2024 am 11:54 AM

Cara menggunakan sessionStorage dengan betul untuk menyimpan maklumat sensitif memerlukan contoh kod khusus Sama ada dalam pembangunan web atau pembangunan aplikasi mudah alih, kami selalunya perlu menyimpan dan memproses maklumat sensitif, seperti bukti kelayakan log masuk pengguna, nombor ID, dsb. Dalam pembangunan bahagian hadapan, menggunakan sessionStorage ialah penyelesaian storan biasa. Walau bagaimanapun, memandangkan sessionStorage ialah storan berasaskan pelayar, beberapa isu keselamatan perlu diberi perhatian untuk memastikan maklumat sensitif yang disimpan tidak diakses dan digunakan secara berniat jahat.

Bagaimanakah PHP dan swoole mencapai caching dan penyimpanan data yang cekap? Jul 23, 2023 pm 04:03 PM

Bagaimanakah PHP dan swoole mencapai caching dan penyimpanan data yang cekap? Gambaran Keseluruhan: Dalam pembangunan aplikasi web, caching dan penyimpanan data adalah bahagian yang sangat penting. PHP dan swoole menyediakan kaedah yang cekap untuk cache dan menyimpan data. Artikel ini akan memperkenalkan cara menggunakan PHP dan swoole untuk mencapai caching dan penyimpanan data yang cekap, serta memberikan contoh kod yang sepadan. 1. Pengenalan kepada swoole: swoole ialah enjin komunikasi rangkaian tak segerak berprestasi tinggi yang dibangunkan untuk bahasa PHP

Memahami jadual kecerdasan buatan dalam satu artikel: bermula dengan MindsDB Apr 12, 2023 pm 12:04 PM

Artikel ini dicetak semula daripada akaun awam WeChat "Hidup dalam Era Maklumat" Penulis hidup dalam era maklumat. Untuk mencetak semula artikel ini, sila hubungi akaun awam Living in the Information Age. Bagi pelajar yang biasa dengan operasi pangkalan data, menulis pernyataan SQL yang indah dan mencari cara untuk mencari data yang mereka perlukan daripada pangkalan data adalah operasi rutin. Bagi pelajar yang biasa dengan pembelajaran mesin, ia juga merupakan operasi rutin untuk mendapatkan data, praproses data, membina model, menentukan set latihan dan set ujian, dan menggunakan model terlatih untuk membuat satu siri ramalan tentang masa depan. Jadi, bolehkah kita menggabungkan kedua-dua teknologi? Kami melihat bahawa data disimpan dalam pangkalan data, dan ramalan perlu berdasarkan data lepas. Jika kita menanyakan data masa depan melalui data sedia ada dalam pangkalan data, maka ia adalah

Kaedah dan teknik untuk caching dan penyimpanan data menggunakan tatasusunan PHP Jul 16, 2023 pm 02:33 PM

Kaedah dan teknik untuk menggunakan tatasusunan PHP untuk melaksanakan caching dan penyimpanan data Dengan perkembangan Internet dan pertumbuhan pesat volum data, caching dan penyimpanan data telah menjadi salah satu isu yang mesti kita pertimbangkan semasa proses pembangunan. Sebagai bahasa pengaturcaraan yang digunakan secara meluas, PHP juga menyediakan pelbagai kaedah dan teknik untuk melaksanakan caching dan penyimpanan data. Antaranya, menggunakan tatasusunan PHP untuk caching dan penyimpanan data adalah kaedah yang mudah dan cekap. 1. Caching data Tujuan caching data adalah untuk mengurangkan bilangan capaian kepada pangkalan data atau sumber data luaran lain, dengan itu meningkatkan

See all articles

Kiraan Item:	-
" kunci ":	" val "