作用：它只是可以将一部分数据在当前会话中保存下来，刷新页面数据依旧存在。但当页面关闭后，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可以方便的实现存储的数据遍历，例如下面的代码：
1 2 3 4 5 6 | var storage = window.sessionStorage;for(var i=0, len=storage.length; i<len;i++){ var key = storage.key(i); var value = storage.getItem(key); console.log(key + "=" + value);} |
实例:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 | <!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> |
结果：
https://www.cnblogs.com/unknows/p/10968346.html
