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會被清除