作用：它只是可以將一部分數據在當前會話中保存下來，刷新頁面數據依舊存在。但當頁面關閉后，sessionStorage 中的數據就會被清空
sessionStorage的方法
setItem存儲value
用途：將value存儲到key字段
sessionStorage.setItem("key", "value");
getItem獲取value
用途：獲取指定key本地存儲的值
var value = sessionStorage.getItem("key");
removeItem刪除key
用途：刪除指定key本地存儲的值
sessionStorage.removeItem("key");
clear清除所有的key/value
用途：清除所有的key/value
sessionStorage.clear();
sessionStorage的key和length屬性實現遍歷
sessionStorage提供的key()和length可以方便的實現存儲的數據遍歷，例如下面的代碼：
實例:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>SessionStorage</title>
<script type="text/javascript">
window.onload = function()
{
//首先獲得body中的3個input元素
var msg = document.getElementById("msg");//文本框要輸入的內容
var getData = document.getElementById("getData");//獲取數據
var setData = document.getElementById("setData");//保存數據
var removeData=document.getElementById("removeData");//移除數據
setData.onclick = function()//存入數據
{
if(msg.value)
{
sessionStorage.setItem("data", msg.value);//把data對應的值保存到sessionStorage
alert("信息已保存到data字段中");
}
else
{
alert("信息不能為空");
}
}
getData.onclick = function()//獲取數據
{
var msg = sessionStorage.getItem("data");
if(msg)
{
alert("data字段中的值為：" + msg);//把data對應的值彈出來
}
else
{
alert("data字段無值！");
}
}
removeData.onclick=function() //移除數據
{
var msg = sessionStorage.getItem("data");
//sessionStorage.clear(msg); //清除本地所有的key/value
sessionStorage.removeItem("data");
}
}
</script>
</head>
<body>
<input id="msg" type="text"/>
<input id="setData" type="button" value="保存數據"/>
<input id="getData" type="button" value="獲取數據"/>
<input id="removeData" type="button" value="移除數據"/>
</body>
</html>
結果：
