sessionStorage使用


sessionStorage 是HTML5新增會話存儲對象,它sessionStorage屬性允許你訪問一個 session Storage 對象,用於保存同一窗口或標簽頁的數據。
sessionStorage 會在當前窗口或是標簽頁打開的期間一直保持,並且重新加載或恢復頁仍會保持原來會話。當窗口或標簽頁關閉的時候會被刪除。

特點

  • 同源 sessionStorage受同源策略限制,跨域無法訪問。
    └── 跨域可以使用localStorage postMessage和iframe 來解決

  • 不會隨着http發送到服務器,只會存儲在本地。
    └──不需要的傳到服務器的數據可以替代cookie,減小帶寬

  • sessionStorage使用key和value進行存儲,value值必須為字符串,不為字符串會自動轉型。

  • 存儲上限限制,不同瀏覽器限制均不一樣,但是大多數上限限制為5MB

和localStorage區別

localStorage會將數據存儲在本地,所以在關閉瀏覽器時不會被刪除。會一直存在直到被明確刪除。

sessionStorage API


// 保存數據到sessionStorage
sessionStorage.setItem('key', 'value');

// 從sessionStorage獲取數據
var data = sessionStorage.getItem('key');

// 從sessionStorage刪除保存的數據
sessionStorage.removeItem('key');

// 從sessionStorage刪除所有保存的數據
sessionStorage.clear();

示例


<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<button id="btn">Clear</button>
	</body>
	<script>
		window.onload = function(){
			
			sessionStorage.setItem('test-key', 'test-value');
			
			document.getElementById("btn").onclick = function(){
				sessionStorage.removeItem('test-key');
			}
		}
	</script>
</html>


我們可以在Application-Session Storage中查看到我們存的test-key

點擊clear button以后test-key會被清除


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM