深入剖析webstorage--html5的本地数据处理-Tutorial H5-php.cn

Rumah

hujung hadapan web

Tutorial H5

深入剖析webstorage--html5的本地数据处理

巴扎黑

May 21, 2017 pm 07:11 PM

html5

下面小编就为大家带来一篇深入剖析webstorage[html5的本地数据处理]。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧，祝大家游戏愉快哦

1.webStorage是什么？

webStorage是html5中用于本地化存储的一种方式，而在之前呢我们是用cookie的存储方式处理;

2.那它们之间的区别是什么？

Ⅰ.cookie存在的问题：

ⅰ.cookie需要向服务端发送一个请求，服务端返回一个cookieId，存储用浏览器缓存里,需消耗一定的带宽。[cookie会随着每次HTTP请求头信息一起发送，无形中增加了网络流量];

ⅱ.cookie存储的数据容量有限，根据浏览器类型不同而不同，IE6大约只能存储2K;

Ⅱ.而webstorage只需把数据存储于本地;

3.我们可以举一个小例子说明一下

eg:输入用户名和密码，点击按钮1时，把数据保存起来，点击按钮2，页面刷新还可以获取到；

过程：

ⅰ.创建一个事件

XML/HTML Code复制内容到剪贴板

```
function MyClick1()   
{   
}
```
Salin selepas log masuk

ⅱ.通过一个id获取到它的用户名

JavaScript Code复制内容到剪贴板

var
 username = $(
"#TxtUserName"
).val();

Salin selepas log masuk

ⅲ.通过一个id获取到它的密码

JavaScript Code复制内容到剪贴板

```
var
 pwd = $(
"#TxtPwd"
).val();
```
Salin selepas log masuk

ⅳ.用户名和密码获取到之后，我们要怎么存数据呢？有两种方式：

①. 第一种：sessionStorege,使用于Firefox2+的火狐浏览器;

生命周期：用这种方式存储的数据仅窗口级别有效，同一个窗口（或者Tab）页面刷新或者跳转，都能获取到本地存储的数据，当新开窗口或者页面时，原来的数据就失效了[仅限当前页面]

缺点：IE不支持，不能实现数据的持久保存。

JavaScript Code复制内容到剪贴板

sessionStorage.setItem("k_username", username); sessionStorage.setItem("k_pwd", pwd);

注：sessionStorage.setItem是通过键值对的方式存储;

②.第二种方式:localStorage

localStorage是Web Storage互联网存储规范中的一部分，现在在Firefox 3.5、Safari 4和IE8中得到支持。

生命周期：存于本地C盘，浏览器关闭打开之后还有;

缺点：低版本浏览器不支持。

JavaScript Code复制内容到剪贴板

localStorage.setItem("k_username", username);   
           localStorage.setItem("k_pwd",pwd);

Salin selepas log masuk

ⅴ.打印

JavaScript Code复制内容到剪贴板

alert("保存成功！");

ⅵ.按钮2打印以上所有数据

第一种方式打印：

JavaScript Code复制内容到剪贴板

function MyClick2() {   
                alert(sessionStorage.getItem("k_username"));   
                alert(sessionStorage.getItem("k_pwd"));   
            }

Salin selepas log masuk

第二种方式打印

JavaScript Code复制内容到剪贴板

function MyClick2() {   
            alert(localStorage.getItem("k_username"));   
            alert(localStorage.getItem("k_pwd"))   
           }

Salin selepas log masuk

结果显示:

ⅶ.扩展：localStorage的removeItem方法

//如果我想删除它的用户名怎么做呢？通过它的key把它删除,这样获取时就为空

Salin selepas log masuk

//localStorage.removeItem("k_username");

Salin selepas log masuk

跟踪本地数据情况:

结果显示:

ⅷ.localStorage的clear方法

//如果我想把所有数据都清除？localStorage有个方法

Salin selepas log masuk

localStorage.clear();

Salin selepas log masuk

结果显示:

代码显示：

XML/HTML Code复制内容到剪贴板

Salin selepas log masuk

4.webStorage制作简易留言板[代码为了展示效果所以把js就直接在html里面写]

XML/HTML Code复制内容到剪贴板

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script src="js/jquery-1.4.1.min.js"></script>
    <script type="text/javascript">
    $(function () {   
        //4.页面刷新之后判断它是否为空？   
        if (localStorage.getItem("k_showCon") != null) {   
            //5.存在，就把获取到的内容存到里面去   
            "k_showCon", $("#showCon").html(localStorage.getItem("k_showCon"));   
        }   
    });   
        function preservationClick()   
        {   
            var sCon = $("#mCon").val();   
            //2.获取到内容之后加到显示p里去？怎么放呢？这里我们用append方法   
            $("#showCon").append("<p>" + sCon + "</p>");   
            //3.预期的是刷新之后留言还在   
            localStorage.setItem("k_showCon", $("#showCon").html());   
        }   
        function ClearClick()   
        {   
            //6.获取到显示p里面的内容清除   
            $("#showCon").html("");   
            localStorage.clear();   
        }   
    </script>
</head>
<body>
    <p>
        <table>
            <tr>
                <td colspan="2">
                    <textarea id="mCon" cols="25" rows="10"></textarea>
                </td>
            </tr>
            <tr>
                <td><input type="button" value="留言" onclick="preservationClick()" /></td>
                <td><input type="button" value="清除" onclick="ClearClick()" /></td>
            </tr>
        </table>
        <p id="showCon"></p>
    </p>
</body>
</html>

Salin selepas log masuk

效果显示:

Atas ialah kandungan terperinci 深入剖析webstorage--html5的本地数据处理. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

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

AI Hentai Generator

Menjana ai hentai secara percuma.

Tunjukkan Lagi

Artikel Panas

R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)

3 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

R.E.P.O. Tetapan grafik terbaik

3 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Assassin's Creed Shadows: Penyelesaian Riddle Seashell

2 minggu yang lalu By DDD

R.E.P.O. Cara Memperbaiki Audio Jika anda tidak dapat mendengar sesiapa

3 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

WWE 2K25: Cara Membuka Segala -galanya Di Myrise

3 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

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?

7467

Tutorial CakePHP

1376

Apakah format nama akaun stim

kunci pengaktifan win11 kekal

Sambungan NYT menunjukkan dan jawapan

Tunjukkan Lagi

Related knowledge

Sempadan Jadual dalam HTML Sep 04, 2024 pm 04:49 PM

Panduan untuk Sempadan Jadual dalam HTML. Di sini kita membincangkan pelbagai cara untuk menentukan sempadan jadual dengan contoh Sempadan Jadual dalam HTML.

HTML jidar-kiri Sep 04, 2024 pm 04:48 PM

Panduan untuk HTML margin-kiri. Di sini kita membincangkan gambaran keseluruhan ringkas tentang HTML margin-left dan Contoh-contohnya bersama-sama dengan Pelaksanaan Kodnya.

Jadual Bersarang dalam HTML Sep 04, 2024 pm 04:49 PM

Ini ialah panduan untuk Nested Table dalam HTML. Di sini kita membincangkan cara membuat jadual dalam jadual bersama-sama dengan contoh masing-masing.

Susun Atur Jadual HTML Sep 04, 2024 pm 04:54 PM

Panduan untuk Susun Atur Jadual HTML. Di sini kita membincangkan Nilai Susun Atur Jadual HTML bersama-sama dengan contoh dan output n perincian.

Senarai Tertib HTML Sep 04, 2024 pm 04:43 PM

Panduan kepada Senarai Tertib HTML. Di sini kami juga membincangkan pengenalan senarai dan jenis Tertib HTML bersama-sama dengan contoh mereka masing-masing

Pemegang Tempat Input HTML Sep 04, 2024 pm 04:54 PM

Panduan untuk Pemegang Tempat Input HTML. Di sini kita membincangkan Contoh Pemegang Tempat Input HTML bersama-sama dengan kod dan output.

Memindahkan Teks dalam HTML Sep 04, 2024 pm 04:45 PM

Panduan untuk Memindahkan Teks dalam HTML. Di sini kita membincangkan pengenalan, cara teg marquee berfungsi dengan sintaks dan contoh untuk dilaksanakan.

Butang onclick HTML Sep 04, 2024 pm 04:49 PM

Panduan untuk Butang onclick HTML. Di sini kita membincangkan pengenalan, kerja, contoh dan onclick Event masing-masing dalam pelbagai acara.

See all articles