sessionStorage用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。下面是其用法:

  1.  <!DOCTYPE HTML>
  2.  <html>
  3.  <head>
  4.    <meta charset="utf-8">
  5.    <title>SessionStorage</title>
  6.  <script type="text/javascript">
  7.      window.onload = function()
  8.      {
  9.          //首先获得body中的3个input元素
  10.          var msg = document.getElementById("msg");//文本框要输入的内容
  11.          var getData = document.getElementById("getData");//获取数据
  12.          var setData = document.getElementById("setData");//保存数据
  13.          var removeData=document.getElementById("removeData");//移除数据
  14.          setData.onclick = function()//存入数据
  15.          {
  16.              if(msg.value)
  17.              {
  18.                      sessionStorage.setItem("data", msg.value);//把data对应的值保存到sessionStorage
  19.                      alert("信息已保存到data字段中");
  20.              }
  21.              else
  22.              {
  23.                      alert("信息不能为空");
  24.              }
  25.          }
  26.  
  27.          getData.onclick = function()//获取数据
  28.          {
  29.              var msg = sessionStorage.getItem("data");
  30.              if(msg)
  31.              {
  32.                      alert("data字段中的值为：" + msg);//把data对应的值弹出来
  33.              }
  34.              else
  35.              {
  36.                      alert("data字段无值！");
  37.              }
  38.          }
  39.          removeData.onclick=function() //移除数据
  40.          {
  41.              var msg = sessionStorage.getItem("data");
  42.              sessionStorage.removeChild(msg);
  43.          }
  44.      }
  45.  </script>
  46.  </head>
  47.  <body>
  48.      <input id="msg" type="text"/>
  49.      <input id="setData" type="button" value="保存数据"/>
  50.      <input id="getData" type="button" value="获取数据"/>
  51.      <input id="removeData" type="button" value="移除数据"/>
  52.  </body>
  53.  </html>

sessionStorage的用法总结的更多相关文章

  1. localStorage 和 sessionStorage 的用法

    其实提供的接口很简单,localStorage 和 sessionStorage 的用法是一样的. 设置数据:setItem(name, value) 获取数据:getItem(name) 删除键值: ...

  2. HTML5本地存储localStorage、sessionStorage基本用法、遍历操作、异常处理等

    HTML5 的本地存储 API 中的 localStorage 与 sessionStorage 在使用方法上是相同的,区别在于 sessionStorage 在关闭页面后即被清空,而 localSt ...

  3. HTML5本地存储 localStorage 和 sessionStorage 的基本用法及属性

    localStorage 和 sessionStorage 的用法都是本地的存储和获取 但他们又有所区别, 1, sessionStorage 是一个短暂的本地存数,它会随着浏览器的刷新和关闭而消失, ...

  4. sessionstorage，localstorage和cookie之间的区别以及各自的用法

    由于年前辞了自己的工作,年后又开始重新找工作,参加了好几次面试,居然都遇到了同样的面试题:sessionstorage,localstorage和cookie之间的是区别? 当然,在面试的时候答的也不 ...

  5. sessionStorage和localStorage的用法，不同点和相同点

    一,共同点 (1)存储时用setItem: localStorage.setItem("key","value");//以"key"为名称存 ...

  6. JS --- 本地保存localStorage、sessionStorage用法总结

    JS的本地保存localStorage.sessionStorage用法总结 localStorage.sessionStorage是Html5的特性,IE7以下浏览器不支持 为什么要掌握localS ...

  7. [转]sessionStorage（）和localStorage（）的用法

    JS的本地保存localStorage.sessionStorage用法总结: 1. localStorage.sessionStorage是Html5的特性,IE7以下浏览器不支持 为什么要掌握lo ...

  8. sessionStorage和localStorage的区别

    JS的本地保存localStorage.sessionStorage用法总结 localStorage.sessionStorage是Html5的特性,IE7以下浏览器不支持 为什么要掌握localS ...

  9. localstorage和sessionstorage上手使用记录

    通过阅读各路大神对web存储locastorage和sessionstorage的用法解析,自己试用了一下,在此留个备忘. 在项目中,如果用到很多次storage,要存储很多数据,就要把它封装成函数了 ...

随机推荐

  1. CVE-2017-11882复现-office命令执行

    0x01 前言 11月14日,微软按照惯例发布了11月的安全更新,随后不久,安全公司EMBEDI在官方博客上公开了其向微软提交的编号为CVE-2017-11882的Office远程代码执行漏洞: ht ...

  2. vue项目苹果微信端使用this.$router.go(-1)返回上一页，上一页并不会重新加载的问题

    window.addEventListener('pageshow', function(e) { // 通过persisted属性判断是否存在 BF Cache if (e.persisted) { ...

  3. 在Vue项目里面使用d3.js

    之前写一个 Demo里面 有些东西要使用d3实现一些效果 但是在很多论坛找资源都找不到可以在Vue里面使用D3.js的方法,npm 上面的D3相对来说 可以说是很不人性化了 完全没有说 在webpac ...

  4. spring-运行时值注入

    在项目中经常使用连接数据库的配置,如下所示 <bean id="dataSource" class="org.apache.commons.dbcp.BasicDa ...

  5. Bad escape character ‘ygen’ 错误原因!

    ssh-keygen -t rsa -C “邮箱” ssh-keygen 命令中间没有空格,如果在ssh后面加上空格,会得到Bad escape character ‘ygen’.的错误.

  6. DJANGO2.0 关联表的必填 ON_DELETE

    DJANGO2.0 关联表的必填 ON_DELETE 参数的含义 - BUXIANGHEJIU 的博客 - CSDN 博客 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blo ...

  7. Django自带后台使用配置

    参考官网地址:https://docs.djangoproject.com/en/1.11/ref/contrib/admin/ ,本文章值是介绍简单配置,如果需要详细内容可以查阅官方文档 自动管理界 ...

  8. ruby 数据类型String

    一.字符串创建 单引号包含,不支持转义符和内嵌表达式#{}(插值符) str = 'hello world!' 双引号包含 str = "hello world!" 使用%,%Q, ...

  9. 抽象类实验：SIM卡抽象

    抽象SIM: package sim_package; public abstract class SIM { public abstract String giveNumber(); public ...

  10. Test类实验

    package PC_TEST; class CPU{ int speed; CPU(){ speed=0; } CPU(int k){ speed=k; } void setSpeed(int k) ...