Storan web HTML5

Apakah Storan Web HTML5?

Menggunakan HTML5 untuk menyimpan data penyemakan imbas pengguna secara setempat, ini merupakan kaedah storan setempat yang lebih baik daripada kuki.

Terdahulu, storan tempatan menggunakan kuki. Tetapi storan Web perlu lebih selamat dan cepat Data tidak akan disimpan pada pelayan, tetapi data hanya akan digunakan apabila pengguna meminta data tapak web Ia juga boleh menyimpan sejumlah besar data tanpa menjejaskan prestasi laman web.

Data wujud dalam pasangan kunci/nilai, dan data halaman web hanya boleh diakses dan digunakan oleh halaman web tersebut.

Sokongan penyemak imbas

Internet Explorer 8+, Firefox, Opera, Chrome dan Safari menyokong storan Web.

Nota: Internet Explorer 7 dan versi IE terdahulu tidak menyokong storan web.

localStorage dan sessionStorage

Terdapat dua objek baharu untuk menyimpan data pada bahagian klien:

localStorage - storan data tanpa had masa
sessionStorage - Storan data untuk sesi

Sebelum menggunakan storan web, anda harus menyemak sama ada penyemak imbas Sokongan localStorage dan sessionStorage:

if(typeof(Storage)!=="undefined")
{
// sessionStorage localStorage disokong!
// Kod berkaitan....
}
lain
{
// Maaf, storan web tidak disokong
}

objek localStorage

Tiada had masa pada data yang disimpan oleh objek localStorage. Data masih tersedia selepas hari, minggu atau tahun berikutnya.

<!DOCTYPE html>
<html>
<head> 
    <meta charset="UTF-8">
    <title>php中文网(php.cn)</title> 
</head>
<body>
<div id="result"></div>
<script>
    if(typeof(Storage)!=="undefined")
    {
        localStorage.lastname="刘奇";
        document.getElementById("result").innerHTML="姓名: " + localStorage.lastname;
    }
    else
    {
        document.getElementById("result").innerHTML="对不起,您的浏览器不支持web存储……";
    }
</script>
</body>
</html>

Jalankan atur cara dan cuba

Analisis contoh:

Buat kunci/nilai Storan setempat menggunakan key="nama akhir" dan value= "Smith" Untuk

dapatkan semula nilai dengan kunci "nama keluarga" dan masukkan data ke dalam elemen dengan id="result"

Petua: Pasangan kunci/nilai ialah biasanya rentetan Storan, anda boleh menukar format mengikut keperluan anda.

Contoh berikut menunjukkan bilangan kali pengguna mengklik butang Nilai rentetan dalam kod ditukar kepada jenis angka:

<!DOCTYPE html>
<html>
<head> 
    <meta charset="UTF-8">
    <title>php中文网(php.cn)</title> 
    <script>
        function clickCounter()
        {
            if(typeof(Storage)!=="undefined")
            {
                if (localStorage.clickcount)
                {
                    localStorage.clickcount=Number(localStorage.clickcount)+1;
                }
                else
                {
                    localStorage.clickcount=1;
                }
                document.getElementById("result").innerHTML="点击按钮" + localStorage.clickcount + " time(s).";
            }
            else
            {
                document.getElementById("result").innerHTML="对不起,您的浏览器不支持web存储……";            }
        }
    </script>
</head>
<body>
<p><button onclick="clickCounter()" type="button">点击</button></p>
<div id="result"></div>
<p>单击该按钮查看计数器增加。</p>
<p>关闭浏览器选项卡(或窗口),再试一次,计数器将继续计数(不是重置)。</p>
</body>
</html>

Jalankan program dan cuba

sessionStorage object

Kaedah sessionStorage menyimpan data untuk sesi. Data dipadamkan apabila pengguna menutup tetingkap penyemak imbas.

Cara membuat dan mengakses sessionStorage: :

<!DOCTYPE html>
<html>
<head> 
    <meta charset="UTF-8">
    <title>php中文网(php.cn)</title> 
    <script>
        function clickCounter()
        {
            if(typeof(Storage)!=="undefined")
            {
                if (sessionStorage.clickcount)
                {
                    sessionStorage.clickcount=Number(sessionStorage.clickcount)+1;
                }
                else
                {
                    sessionStorage.clickcount=1;
                }
                document.getElementById("result").innerHTML="点击按钮 " + sessionStorage.clickcount + " time(s) ";
            }
            else
            {
                document.getElementById("result").innerHTML="对不起,您的浏览器不支持web存储……";
            }
        }
    </script>
</head>
<body>
<p><button onclick="clickCounter()" type="button">点击</button></p>
<div id="result"></div>
<p>单击该按钮查看计数器增加。</p>
<p>关闭浏览器选项卡(或窗口),再试一次,计数器复位</p>
</body>
</html>

Jalankan program untuk mencubanya

Meneruskan pembelajaran

fail baharu

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>php中文网(php.cn)</title> <script> function clickCounter() { if(typeof(Storage)!=="undefined") { if (localStorage.clickcount) { localStorage.clickcount=Number(localStorage.clickcount)+1; } else { localStorage.clickcount=1; } document.getElementById("result").innerHTML="点击按钮" + localStorage.clickcount + " time(s)."; } else { document.getElementById("result").innerHTML="对不起,您的浏览器不支持web存储……"; } } </script> </head> <body> <p><button onclick="clickCounter()" type="button">点击</button></p> <div id="result"></div> <p>单击该按钮查看计数器增加。</p> <p>关闭浏览器选项卡(或窗口),再试一次,计数器将继续计数(不是重置)。</p> </body> </html>

serahkan Tetapkan Semula Kod

Operasi automatik

Storan web HTML5

peringkat rendahTutorial tapak web tiruan perusahaan Imperial CMS

peringkat rendahPemula dengan asas sifar dalam WordPress membina blog peribadi dan laman web korporat

peringkat rendahVideo arahan pembinaan tapak web berasaskan sifar CMS muktamad

peringkat rendahProjek hadapan-Shangyou [amalan komprehensif teknologi HTML/CSS/JS]

PertengahanVue3.0 daripada 0 untuk membina amalan projek sistem pengurusan belakang universal

peringkat rendahKursus front-end berasaskan sifar [pembelajaran lanjutan Vue dan aplikasi praktikal]

peringkat rendahTutorial bahagian hadapan WEB [HTML5+CSS3+JS]

peringkat rendahBermula dengan cepat dengan apipost

PertengahanTutorial praktikal Vue3+TypeScript amalan projek peringkat perusahaan

peringkat rendahMari kita bercakap secara ringkas tentang memulakan perniagaan dalam PHP

PertengahanProjek e-dagang VUE (pertempuran sebenar projek dua bahagian hadapan & belakang)

peringkat rendahAplikasi praktikal Apipost [api, antara muka, ujian automatik, olok-olok]