HTML5本地存儲應用sessionStorage和localStorage

來源：懂視網(wǎng) 責編：小采時間：2020-11-27 15:07:26

HTML5本地存儲應用sessionStorage和localStorage

HTML5本地存儲應用sessionStorage和localStorage:在html5之前，瀏覽器要實現(xiàn)數(shù)據(jù)的存儲，一般都是用cookie，但是cookie有域名和大小限定. html5流行之后，可以通過localStorage和sessionStorage實現(xiàn)瀏覽器端的數(shù)據(jù)存儲，這兩者有什么特點呢？sessionStorage sessionStorage屬于臨時會

推薦度：

點擊下載本文 文檔為doc格式

導讀HTML5本地存儲應用sessionStorage和localStorage:在html5之前，瀏覽器要實現(xiàn)數(shù)據(jù)的存儲，一般都是用cookie，但是cookie有域名和大小限定. html5流行之后，可以通過localStorage和sessionStorage實現(xiàn)瀏覽器端的數(shù)據(jù)存儲，這兩者有什么特點呢？sessionStorage sessionStorage屬于臨時會

在html5之前，瀏覽器要實現(xiàn)數(shù)據(jù)的存儲，一般都是用cookie，但是cookie有域名和大小限定.

html5流行之后，可以通過localStorage和sessionStorage實現(xiàn)瀏覽器端的數(shù)據(jù)存儲，這兩者有什么特點呢？

sessionStorage
　　sessionStorage屬于臨時會話，數(shù)據(jù)存儲的有效期為：從頁面打開到頁面關閉的時間段,屬于窗口的臨時存儲，頁面關閉，本地存儲消失

localStorage

永久存儲（可以手動刪除數(shù)據(jù)）

存儲量限制 ( 5M )

客戶端完成，不會請求服務器處理

sessionStorage數(shù)據(jù)在頁面之間不能共享、而localStorage可以實現(xiàn)頁面之間共享

sessionStorage的應用:

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title></title>
 <script>
 window.onload = function(){
 var aInput = document.getElementsByTagName('input');
 aInput[0].onclick = function(){
 //sessionStorage: 臨時存儲, 只在當前頁面有效,不能傳遞到其他頁面,頁面關閉之后消失
 window.sessionStorage.setItem("name", aInput[3].value );
 };
 aInput[1].onclick = function(){
 alert(window.sessionStorage.getItem("name" ));
 };
 aInput[2].onclick = function(){
 window.sessionStorage.removeItem("name" );
 };
 }
 </script>
</head>
<body>
<input type="button" value="設置" />
<input type="button" value="獲取" />
<input type="button" value="刪除" />
<br/>
<input type="text" />
</body>
</html>

localStorage的應用

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title></title>
 <script>
 window.onload = function(){
 var aInput = document.getElementsByTagName('input');
 aInput[0].onclick = function(){
 //localStorage : 永久性存儲
 window.localStorage.setItem("name", aInput[3].value);
 window.localStorage.setItem("name2", 'aaaaa');
 };
 aInput[1].onclick = function(){
 alert( window.localStorage.getItem( "name" ) );
 alert( window.localStorage.getItem( "name2" ) );
 };
 aInput[2].onclick = function(){
 window.localStorage.removeItem("name");
// window.localStorage.clear();
 };
 }
 </script>
</head>
<body>
<input type="button" value="設置" />
<input type="button" value="獲取" />
<input type="button" value="刪除" />
<br/>
<input type="text" />
</body>
</html>

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title></title>
 <script>
 window.onload = function () {
 var aInput = document.getElementsByTagName("input");
 var oT = document.querySelector("textarea");

 if (window.localStorage.getItem("userName")) {
 aInput[0].value = window.localStorage.getItem("userName");
 }

 for (var i = 0; i < aInput.length; i++) {
 if (window.localStorage.getItem('sex') == aInput[i].value) {
 aInput[i].checked = true;
 }
 }

 if (window.localStorage.getItem("note")) {
 oT.value = window.localStorage.getItem("note");
 }

 window.onunload = function () {
 if (aInput[0].value) {
 window.localStorage.setItem("userName", aInput[0].value);
 }

 for (var i = 0; i < aInput.length; i++) {
 if (aInput[i].checked == true) {
 window.localStorage.setItem('sex', aInput[i].value);
 }
 }

 if (oT.value) {
 window.localStorage.setItem('note', oT.value);
 }
 }
 }
 </script>
</head>
<body>
<p>
 用戶名: <input type="text"/>
</p>

<p>
 性別: <br/>
 <input type="radio" name="sex" value="男"/>男
 <input type="radio" name="sex" value="女"/>女
</p>

<p>
 備注:
 <textarea cols="30" rows="10"></textarea>
</p>

</body>
</html>

聲明：本網(wǎng)頁內容旨在傳播知識，若有侵權等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

HTML5本地存儲應用sessionStorage和localStorage

推薦度：

點擊下載本文 文檔為doc格式

標簽：應用存儲 html5

熱門焦點

HTML5本地存儲應用sessionStorage和localStorage

HTML5本地存儲應用sessionStorage和localStorage

HTML5本地存儲應用sessionStorage和localStorage

最新推薦

猜你喜歡

熱門推薦