作用：它只是可以将一部分数据在当前会话中保存下来，刷新页面数据依旧存在。但当页面关闭后，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总结与实例的更多相关文章

  1. js生成随机数的方法实例总结 [收藏]

    js生成随机数的方法实例总结 js生成随机数主要用到了内置的Math对象的random()方法.用法如:Math.random().它返回的是一个 0 ~ 1 之间的随机数.有了这么一个方法,那生成任 ...

  2. js使用sessionStorage、cookie保存token

    本文是参考别人的博客写的,图片直接用的别人的 1.Token:token是客户端频繁向服务器端请求数据,服务器频繁的去数据库查询用户名和密码进行对比,判断用户名和密码正确与否,并作出相应的提示,在这样 ...

  3. BootStrap fileinput.js文件上传组件实例代码

    1.首先我们下载好fileinput插件引入插件 ? 1 2 3 <span style="font-size:14px;"><link type="t ...

  4. JS判断不能为空实例代码

    JS判断不能为空实例代码.分享在此. 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " ...

  5. JS JSOP跨域请求实例详解

    JSONP(JSON with Padding)是JSON的一种“使用模式”,可用于解决主流浏览器的跨域数据访问的问题.这篇文章主要介绍了JS JSOP跨域请求实例详解的相关资料,需要的朋友可以参考下 ...

  6. js的dom测试及实例代码

    js的dom测试及实例代码 一.总结 一句话总结: 1.需要记得 创建 标签和创建文本节点都是document的活:document.createTextNode("Rockets的姚明&q ...

  7. 原生JS编写的照片墙效果实例演示特效

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. JS的window.location应用实例

    window.location 对象用于获得当前页面的地址 (URL),并把浏览器重定向到新的页面. Window Locationwindow.location 对象在编写时可不使用 window ...

  9. js通过sessionStorage实现的返回上一页

    通常,我们都会使用比较熟悉的javascript:history.go(-1)来实现返回上一页,此种方法有一个问题就是返回上一页后不能刷新当前页面,给我们的开发带来了一定的不便,显然有时这种方法就不是 ...

随机推荐

  1. linux下如何查看当前内核的配置？

    答: zcat /proc/config.gz 当然有个前提条件,需要打开内核的以下两个选项(CONFIG_IKCONFIG和CONFIG_IKCONFIG_PROC): General setup ...

  2. SQL-W3School-基础：SQL 语法

    ylbtech-SQL-W3School-基础:SQL 语法 1.返回顶部 1. 数据库表 一个数据库通常包含一个或多个表.每个表由一个名字标识(例如“客户”或者“订单”).表包含带有数据的记录(行) ...

  3. 一首好听的摇滚歌曲（Ever Dream），以及优美的译作

     送上一首好听的摇滚歌曲,以及优美的译作.祝大家新年快乐.happy new year!  [ti:Ever Dream][ar:Nightwish][al:Century Child][by:吖光] ...

  4. JAVA 自定义对象集合 List<T> 根据自定义字段去重

    1.拥有自定义对象 MyUser @Data public class MyUser { private String userName; private String passWord; } 2.编 ...

  5. openstack部署dashboard

    1.下载安装包 yum install openstack-dashboard 2.编辑配置文件 cp /etc/openstack-dashboard/local_settings /etc/ope ...

  6. hostname -i 出现0.0.0.0解决

    [root@hostnametest4 ~]# hostname -i 0.0.0.0 原因:是因为四个节点中其中一个节点没有配置hosts解析,必须每个节点写全这四个ip,只要掉一个ip就会出现0. ...

  7. mysql 数据库的基本操作

    day 41 MySql 一. 为啥使用数据库? 因为之前使用文件(Excel)管理数据, 但是数据量特别大的时候,使用Excel管理 的话, 就比较的麻烦了因此引入一个新的数据管理软件 : 数据库软 ...

  8. linux中查找命令find、locate、whereis、which、type的区别

    find find是最常见和最强大的查找命令,你可以用它找到任何你想找的文件.与查询数据库(/var/lib/locatedb)文件不同,find查找的是磁盘空间. locate locate命令其实 ...

  9. 用myeclipse连接MySQL8.0时没有配置jar包

    先上测试代码 package testJdbc; import java.sql.Connection; import java.sql.DriverManager; import java.sql. ...

  10. 《Java语言程序设计》第三讲类与对象“动手动脑”

    一.以下代码为何无法通过编译?哪儿出错了? 答: 如果类提供了一个自定义的构造方法,将导致系统不再提供默认构造方法. 二. (1)以下代码输出结果是什么? package xy; public cla ...