js 使用sessionStorage总结与实例

作用：它只是可以将一部分数据在当前会话中保存下来，刷新页面数据依旧存在。但当页面关闭后，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可以方便的实现存储的数据遍历，例如下面的代码：

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>

结果：

巴特西

js 使用sessionStorage总结与实例

最新文章

热门文章