溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
小編給大家分享一下HTML5中sessionStorage和localStorage怎么用，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！
在html5之前，瀏覽器要實現數據的存儲，一般都是用cookie，但是cookie有域名和大小限定.
html5流行之后，可以通過localStorage和sessionStorage實現瀏覽器端的數據存儲，這兩者有什么特點呢？
sessionStorage
sessionStorage屬于臨時會話，數據存儲的有效期為：從頁面打開到頁面關閉的時間段,屬于窗口的臨時存儲，頁面關閉，本地存儲消失
localStorage
永久存儲（可以手動刪除數據）
存儲量限制 ( 5M )
客戶端完成，不會請求服務器處理
sessionStorage數據在頁面之間不能共享、 而localStorage可以實現頁面之間共享
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>看完了這篇文章，相信你對“HTML5中sessionStorage和localStorage怎么用”有了一定的了解，如果想了解更多相關知識，歡迎關注億速云行業(yè)資訊頻道，感謝各位的閱讀！
免責聲明：本站發(fā)布的內容（圖片、視頻和文字）以原創(chuàng)、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
