作用：它只是可以将一部分数据在当前会话中保存下来，刷新页面数据依旧存在。但当页面关闭后，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. consul ocelot

    consul配置完成后 新建.netcoreapi项目, nuget安装ocelot 添加多个配置文件,.netcore中会自动合并为一个文件,global配置总的配置,其他为各个项目的配置 Serv ...

  2. Nginx设置成服务并开机自动启动

    在/etc/init.d下创建文件nginx [root@localhost ~]# vim /etc/init.d/nginx 其内容参考nginx官方文档 需要注意的配置: nginx=”/usr ...

  3. Smarty模板实现隔行换样式

    在网上找了好多关于隔行改变样式的文章,都不符合自己的要求,所以自己想了好多办法,终于把隔行改变样式拿下! 这是模板文件中商品分类列表         <!--{foreach from=$cat ...

  4. Linux添加用户/权限/用户主目录等相关

    一. 用户主目录 useradd -d   ${path}   username -d命令是指定用户主目录, 添加完之后  su -  username 默认会转到 这个用户的主目录下,即 ${pat ...

  5. Python类call函数的作用

    call函数可以把类变成函数来调用call方法 class Demo(): def __init__(self, name): self.name = name def __call__(self): ...

  6. JAVA 基础编程练习题5 【程序 5 判断分数等级】

    5 [程序 5 判断分数等级] 题目:利用条件运算符的嵌套来完成此题:学习成绩>=90 分的同学用 A 表示,60-89 分之间的用 B 表示, 60 分以下的用 C 表示. 程序分析:(a&g ...

  7. jenkins报错解决

    https://www.cnblogs.com/yangxia-test/p/4368778.html https://blog.csdn.net/xlyrh/article/details/5138 ...

  8. Java集合(7)：散列与散列码

    散列的价值在于速度.我们使用数组来保存键的信息,这个信息并不是键本身,而是通过键对象生成一个数字(散列码),作为数组下标.由于数组的容量是固定的,而散列容器的大小是可变的,所以不同的键可以产生相同的数 ...

  9. powerDesigner关联数据库显示中文注释

    最近使用powerdesigner,遇到些问题,记录一下[安装过程就略过了] 一.安装odbc驱动 分享下驱动,百度网盘链接:https://pan.baidu.com/s/1UYPq_PEQkDOJ ...

  10. 【计算机视觉】Histogram of Oriented Gridients(HOG) 方向梯度直方图

    Histogram of Oriented Gridients(HOG) 方向梯度直方图 Histogram of Oriented Gridients,缩写为HOG,是目前计算机视觉.模式识别领域很 ...