HTML5使用Web Storage儲(chǔ)存的方法

發(fā)布時(shí)間：2020-09-14 15:16:56 來(lái)源：億速云閱讀：147 作者：小新欄目：web開發(fā)

這篇文章主要介紹HTML5使用Web Storage儲(chǔ)存的方法，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

在HTML5之前，存儲(chǔ)客戶端數(shù)據(jù)，分擔(dān)了服務(wù)器存儲(chǔ)負(fù)擔(dān)主要是用cookies。但cookies卻有很多局限性，比如：Cookie`數(shù)量和長(zhǎng)度的限制。每個(gè)domain最多只能有20條cookie，每個(gè)cookie長(zhǎng)度不能超過(guò)4KB，否則會(huì)被截掉；安全性問(wèn)題。如果cookie被人攔截了，那人就可以取得所有的session信息。即使加密也與事無(wú)補(bǔ)，因?yàn)閿r截者并不需要知道cookie的意義，他只要原樣轉(zhuǎn)發(fā)cookie就可以達(dá)到目的了；有些狀態(tài)不可能保存在客戶端。例如，為了防止重復(fù)提交表單，我們需要在服務(wù)器端保存一個(gè)計(jì)數(shù)器。如果我們把這個(gè)計(jì)數(shù)器保存在客戶端，那么它起不到任何作用。

為了破解Cookie的一系列限制（主要是cookie的大小和多少都受限制，并且每次你請(qǐng)求一個(gè)新的頁(yè)面的時(shí)候Cookie都會(huì)被發(fā)送過(guò)去，這樣無(wú)形中浪費(fèi)了帶寬，另外cookie還需要指定作用域，不可以跨域調(diào)用），HTML5通過(guò)JS的新的API就能直接存儲(chǔ)大量的數(shù)據(jù)到客戶端瀏覽器，而且支持復(fù)雜的本地?cái)?shù)據(jù)庫(kù)，讓JS更有效率。HTML5支持兩種的WebStorage：永久性的本地存儲(chǔ)（localStorage），會(huì)話級(jí)別的本地存儲(chǔ)（sessionStorage）。下面就讓我們來(lái)了解一下HTML5如何使用Web Storage儲(chǔ)存，介紹Web Storage儲(chǔ)存的2種方式，希望對(duì)大家有所幫助！

一：localStorage（永久性的本地存儲(chǔ)）

一直存儲(chǔ)在本地，數(shù)據(jù)存儲(chǔ)是永久的，除非用戶或程序?qū)ζ溥M(jìn)行刪除操作；localStorage 對(duì)象存儲(chǔ)的數(shù)據(jù)沒(méi)有時(shí)間限制。第二天、第二周或下一年之后，數(shù)據(jù)依然可用。

特點(diǎn)：
① 域內(nèi)安全、永久保存。即客戶端或?yàn)g覽器中來(lái)自同一域名的所有頁(yè)面都可訪問(wèn)localStorage數(shù)據(jù)且數(shù)據(jù)除了刪除否則永久保存，但客戶端或?yàn)g覽器之間的數(shù)據(jù)相互獨(dú)立。
② 數(shù)據(jù)不會(huì)隨著Http請(qǐng)求發(fā)送到后臺(tái)服務(wù)器；
③ 存儲(chǔ)數(shù)據(jù)的大小機(jī)會(huì)不用考慮，因?yàn)樵贖TML5的標(biāo)準(zhǔn)中要求瀏覽器至少要支持到4MB。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>localStorage</title>
	</head>
	<body>
		<script type="text/javascript">
        //添加key-value 數(shù)據(jù)到 localStorage
        localStorage.setItem("localStorage", "http://127.0.0.1:8020");
        //通過(guò)key來(lái)獲取value
        var dt = localStorage.getItem("localStorage");
        alert(dt);
        //清空所有的key-value數(shù)據(jù)。
        //localStorage.clear();
        alert(localStorage.length);
    </script>
	</body>
</html>

效果圖：

HTML5使用Web Storage儲(chǔ)存的方法

localStorage提供了四個(gè)方法來(lái)輔助我們進(jìn)行對(duì)本地存儲(chǔ)做相關(guān)操作。
（1）setItem(key,value)：添加本地存儲(chǔ)數(shù)據(jù)。兩個(gè)參數(shù)，非常簡(jiǎn)單就不說(shuō)了。
（2）getItem(key):通過(guò)key獲取相應(yīng)的Value。
（3）removeItem(key):通過(guò)key刪除本地?cái)?shù)據(jù)。
（4）clear():清空數(shù)據(jù)。

二.sessionStorage（會(huì)話級(jí)別的本地存儲(chǔ)）

在會(huì)話期內(nèi)有效，數(shù)據(jù)在瀏覽器關(guān)閉后自動(dòng)刪除；

特點(diǎn)：會(huì)話控制、短期保存。會(huì)話概念與服務(wù)器端的session概念相似，短期保存指窗口或?yàn)g覽器或客戶端關(guān)閉后自動(dòng)消除數(shù)據(jù)。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>sessionStorage</title>
	</head>
	<body>
		<script type="text/javascript">
        //添加key-value 數(shù)據(jù)到 sessionStorage
        sessionStorage.setItem("sessionStorage", "http://127.0.0.1:8020");
        //通過(guò)key來(lái)獲取value
        var dt = sessionStorage.getItem("sessionStorage");
        alert(dt);
        //清空所有的key-value數(shù)據(jù)。
        //sessionStorage.clear();
        alert(sessionStorage.length);
    </script>
	</body>
</html>

效果圖：

HTML5使用Web Storage儲(chǔ)存的方法

sessionStorage提供了四個(gè)方法來(lái)輔助我們進(jìn)行對(duì)本地存儲(chǔ)做相關(guān)操作。
（1）setItem(key,value)：添加本地存儲(chǔ)數(shù)據(jù)。兩個(gè)參數(shù)，非常簡(jiǎn)單就不說(shuō)了。
（2）getItem(key):通過(guò)key獲取相應(yīng)的Value。
（3）removeItem(key):通過(guò)key刪除本地?cái)?shù)據(jù)。
（4）clear():清空數(shù)據(jù)。

以上是HTML5使用Web Storage儲(chǔ)存的方法的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！

向AI問(wèn)一下細(xì)節(jié)

HTML5使用Web Storage儲(chǔ)存的方法

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽