js 使用sessionStorage總結與實例

時間 2019-12-05

標籤使用 sessionstorage 總結實例欄目 JavaScript 简体版

原文原文鏈接

做用：它只是能夠將一部分數據在當前會話中保存下來，刷新頁面數據依舊存在。但當頁面關閉後，sessionStorage 中的數據就會被清空javascript

sessionStorage的方法
setItem存儲valuehtml

用途：將value存儲到key字段java

sessionStorage.setItem("key", "value");

getItem獲取valuesession

用途：獲取指定key本地存儲的值spa

var value = sessionStorage.getItem("key");

removeItem刪除keycode

用途：刪除指定key本地存儲的值htm

sessionStorage.removeItem("key");

clear清除全部的key/valueblog

用途：清除全部的key/valueip

sessionStorage.clear();

sessionStorage的key和length屬性實現遍歷utf-8

sessionStorage提供的key()和length能夠方便的實現存儲的數據遍歷，例以下面的代碼：

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); 
}

實例:

<!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>

結果：