作用：它只是可以将一部分数据在当前会话中保存下来，刷新页面数据依旧存在。但当页面关闭后，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. js 中 new call apply bind JSON.stringify 的原理以及模拟实现

    1.new的原理和实现 它创建了一个全新的对象. 它会被执行 [[Prototype]](也就是 __proto__)链接. 它使 this指向新创建的对象. 通过 new创建的每个对象将最终被 [[ ...

  2. 小D课堂-SpringBoot 2.x微信支付在线教育网站项目实战_1-2.中大型公司里面项目开发流程讲解

    笔记 2.中大型公司里面项目开发流程讲解     简介:讲解一个项目如何从零到上线,经历过怎样的步骤和流程                  1.一个中大型项目的开发流程,从需求调研到项目上线    ...

  3. 一百一十四：CMS系统之图形验证码生成

    安装Pillow库,用于生成图形验证码:pip install Pillow 字体文件来源 生成一个验证码图片 import randomimport stringfrom PIL import Im ...

  4. Jmeter: PATCH方法无法发送参数的暂时解决方法

    Jmeter: PATCH方法无法发送参数的暂时解决方法 最近在做API测试,前面的GET这些HTTP Request方法都无压力,顺利解决. 但碰到PATCH方法时,发现无法通过. 通过对比,发现P ...

  5. 实时更新Excel文档外部数据源的数据

    实时更新Excel文档外部数据源的数据 单元格区域.Excel 表.数据透视表或数据透视图均可以连接到外部数据源(数据源:用于连接数据库的一组存储的"源"信息.数据源包含数据库服务 ...

  6. 图解Go协程调度原理，小白都能理解

    阅读本文仅需五分钟,golang协程调度原理,小白也能看懂,超实用. 什么是协程 对于进程.线程,都是有内核进行调度,有CPU时间片的概念,进行抢占式调度.协程,又称微线程,纤程.英文名Corouti ...

  7. Java内部类(5)：应用例

    例1-闭包(Closure) 闭包是一个可调用的对象(通过Callback),它记录了一些信息,这些信息来自于创建它的作用域 interface Incrementable { void increm ...

  8. unieap 导出文档错误

    java.lang.reflect.InvocationTargetException at org.eclipse.jface.operation.ModalContext.run(ModalCon ...

  9. vue cli 3.0设置指定端口号运行

    在项目根目录创建vue.config.js文件 module.exports = { devServer: { port: 3000, // 端口 }, // lintOnSave: false // ...

  10. python基础知识（集合）

    集合 可变集合set()/不可变集合frozenset() {}  大写的拉丁字母 用于保存不重复元素.无序不能通过索引来获取 集合的创建 空集合 使用set()函数 变量名 = set() 集合的添 ...