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

    继前天看分享的前后端分离后,又重新研究了GIT分支与各个环境的应用. 从开始使用git就一直有在网上查各种资料,查他的运行规范.但不知道是自己理解不够还是怎么的,一直用得不是很好. 根据自己的摸索,整 ...

  2. nginx开启目录浏览，解决中文乱码问题

    nginx开启目录浏览,解决中文乱码问题 方法如下: server { listen 80; #listen [::]:80; server_name gongzi.liwenhui.xin gz.l ...

  3. Flask Response响应(flask中设置响应信息的方法，返回json数据的方法)

    设置响应信息的方法 1.  返回自定义的响应头,有两种方式: (1)  第一种是:视图函数return的时候,使用元组,返回自定义的信息 返回的时候的状态码可以自定义信息:"状态码   自定 ...

  4. set_multicycle_path语法说明【转载】

    (转载) (其实多看手册就知道原因了) Q:多周期路径中的检查保持时间时刻,为什么默认是在建立时间检查的前一个cycle?请大家谈谈自己的理解. 如:Set_multicycle_path -setu ...

  5. Mysql执行查询语句慢的解决方式

    MySQL使用的是InnoDB引擎.不同于MyISAM引擎只提供表锁,InnoDB提供不同级别的锁.但是在我们日常的操作过程中经常由于对数据库不当的SQL操作导致出现长时间的锁,造成其他的SQL语句长 ...

  6. React Native安卓代码混淆和打包

    一上午就整了个React Native的打包,中间还遇到各种问题,这里还是记录下吧: 文档链接: http://reactnative.cn/docs/0.45/signed-apk-android. ...

  7. Servlet(2)：Requset/Response Encoding and Filter

    Requset/Response Encoding 表单提交分GET和POST,接下来分开讨论. (1)GET/URL提交的数据 在 Tomcat中,默认情况下使用"URIEncoding& ...

  8. 树莓派使用c语言控制管脚--wiringPi安装

    树莓派先安装git,然后安装库 命令如下 git clone https://github.com/WiringPi/WiringPi cd wiringPi ./build 测试--输出管脚信息 g ...

  9. Python3 Selenium自动化web测试 ==> 第六节 WebDriver高级应用 -- 操作web页面的滚动条

    学习目的: 掌握页面元素定位以外的其他重要知识点. 正式步骤: 测试Python3代码 # -*- coding:utf-8 -*- from selenium import webdriver fr ...

  10. DP经典问题—————（LCIS）最长公共上升子序列

    这道题是LIS(最长上升子序列)与LCS(最长公共子序列)问题的综合版本,有关这两个问题可以看一下我的文章:https://www.cnblogs.com/myhnb/p/11305551.html ...