会话存储的工作方式和本地存储的工作方式很接近，不同之处在于数据是各个浏览器上下文私有的，会在文档被关闭时移除（注意是被关闭时才移除，刷新是不会移除的）。我们通过全局sessionStorage访问会话存储，它返回一个Storage对象，该对象与本地存储里的是一样的。

sessionStorage案例1：

 <!doctype html>

 <html>

 <head>

     <meta charset="utf-8">

     <title>sessionStorage</title>

     <style>

     </style>

 </head>

 <body>

 <ul>

     <li>key:<input id="key" type="text" value=""></li>

     <li>value:<input id="value" type="text" value=""></li>

     <li>

         <input id="add" type="button" value="add">

         <input id="clear" type="button" value="clear">

     </li>

     <li id="countmsg">There are <span id="count"></span> items</li>

 </ul>

 <table id="data"></table>

 <script>

     displayData();

     document.getElementById('add').onclick=handleButtonPress;

     document.getElementById('clear').onclick=handleButtonPress;

     function handleButtonPress(e){

         switch(e.target.id){

             case 'add':

                 var key=document.getElementById('key').value;

                 var value=document.getElementById('value').value;

                 sessionStorage.setItem(key,value);

                 break;

             case 'clear':

                 sessionStorage.clear();

         }

         displayData();

     }

     function displayData(){

         var tableItem=document.getElementById('data');

         tableItem.innerHTML='';

         var itemCount=sessionStorage.length;

         document.getElementById('count').innerHTML=itemCount;

         for(var i=0;i<itemCount;i++){

             var key=sessionStorage.key(i);

             var val=sessionStorage[key];

             tableItem.innerHTML+='<tr><th>'+key+'</th><td>'+val+'</td></tr>';

         }

     }

 </script>

 </body>

 </html>

这个案例的工作方式和本地存储里的案例很接近，不同之处在与可见性和寿命受到限制（sessionStorage是临时存储）。这些限制会影响storage事件的处理方式，本地存储里提到storage事件只会在其他同源文档中触发。对于会话存储，这就意味着事件只会在内嵌文档中触发，比如iframe文档，如下案例:

 <!doctype html>

 <html>

 <head>

     <meta charset="utf-8">

     <title>sessionStorage</title>

     <style>

     </style>

 </head>

 <body>

 <ul>

     <li>key:<input id="key" type="text" value=""></li>

     <li>value:<input id="value" type="text" value=""></li>

     <li>

         <input id="add" type="button" value="add">

         <input id="clear" type="button" value="clear">

     </li>

     <li id="countmsg">There are <span id="count"></span> items</li>

 </ul>

 <table id="data"></table>

 <iframe src="./storage.html" width="500" height="175"></iframe>

 <script>

     displayData();

     document.getElementById('add').onclick=handleButtonPress;

     document.getElementById('clear').onclick=handleButtonPress;

     function handleButtonPress(e){

         switch(e.target.id){

             case 'add':

                 var key=document.getElementById('key').value;

                 var value=document.getElementById('value').value;

                 sessionStorage.setItem(key,value);

                 break;

             case 'clear':

                 sessionStorage.clear();

         }

         displayData();

     }

     function displayData(){

         var tableItem=document.getElementById('data');

         tableItem.innerHTML='';

         var itemCount=sessionStorage.length;

         document.getElementById('count').innerHTML=itemCount;

         for(var i=0;i<itemCount;i++){

             var key=sessionStorage.key(i);

             var val=sessionStorage[key];

             tableItem.innerHTML+='<tr><th>'+key+'</th><td>'+val+'</td></tr>';

         }

     }

 </script>

 </body>

 </html>

此案例中iframe引入的storage.html与本地存储那里的storage.html代码一模一样，此处就不做说明。直接copy上面的代码并在浏览器中运行可以查看到效果

会话存储sessionStorage的更多相关文章

  1. python爬虫遇到会话存储sessionStorage

    记录一次爬虫生成链接过程中遇到的sessionStorage存储数据 1.简介 sessionStorage 是HTML5新增的一个会话存储对象,用于临时保存同一窗口(或标签页)的数据,在关闭窗口或标 ...

  2. HTML5 sessionStorage会话存储

    sessionStorage 是HTML5新增的一个会话存储对象,用于临时保存同一窗口(或标签页)的数据,在关闭窗口或标签页之后将会删除这些数据.本篇主要介绍 sessionStorage(会话存储) ...

  3. Token和SessionStorage(会话存储对象)

    sessionStorage数据只在当前标签页共享 存在本地   关闭浏览器后会清除数据(关闭标签页不会清楚) localStorage数据会存在浏览器中  浏览器关了数据也还在 只有清除缓存才会消失 ...

  4. Web存储使用详解（本地存储、会话存储）

    Web存储使用详解(本地存储.会话存储)1,Web存储介绍HTML5的Web存储功能是让网页在用户计算机上保存一些信息.Web存储又分为两种:(1)本地存储,对应 localStorage 对象.用于 ...

  5. HTML5教程之本地存储SessionStorage

    SessionStorage: 将数据保存在session对象中,所谓session是指用户在浏览某个网站时,从进入网站到浏览器关闭所经过的这段时间会话,也就是用户浏览这个网站所花费的时间就是sess ...

  6. express中的会话存储方式

    会话存储需要用的express-session包 app.use(require('express-sessiion')()) express-session接收带有如下选项的配置对象: key;存放 ...

  7. localStorage(本地存储器)、sessionStorage(会话存储)

      设置:localStorage.setItem("token", JSON.parse(res).data.token);   获取:that.token = localSto ...

  8. 本地存储sessionStorage 、 localStorage 、cookie整理

    sessionStorage . localStorage .cookie 的区别 sessionStorage 和 localStorage 是HTML5 Web Storage API 提供的,可 ...

  9. H5本地存储sessionStorage和localStorage的区别

    sessionStorage用于本地存储一个会话(session)中的数据,这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁.因此sessionStorage不是一种持久化的本地 ...

随机推荐

  1. 自主知识产权受热捧 瑞星ESM SOHO版全力护卫小微企业

    小微企业现在可以说是我国国民经济中最重要的组成部分,在总产值.利税.解决就业等方面,都在为国家积极贡献着自己的力量.但在小微企业一片欣欣向荣的背后,却有着难言之隐--那就是困扰着广大小微企业多年的企业 ...

  2. springboot项目基础面试题

    1.springboot与spring的区别. 引用自官方说法: java在集成spring等框架需要作出大量的配置,开发效率低,繁琐.所以官方提出 spring boot的核心思想:习惯优于配置.可 ...

  3. 吴裕雄--天生自然KITTEN编程：对话

  4. stat()函数--------------获取文件信息

    stat():用于获取文件的状态信息,使用时需要包含<sys/stat.h>头文件. 函数原型:int stat(const char *path, struct stat *buf): ...

  5. 那些让程序员目瞪口呆的Bug

    程序员一生与bug奋战,可谓是杀敌无数,见怪不怪了!在某知识社交平台中,一个"有哪些让程序员目瞪口呆的bug"的话题引来了6700多万的阅读,可见程序员们对一个话题的敏感度有多高. ...

  6. Vimium - 让你体验Geek般的浏览体验

    相信很多电脑高手们都会寻找一一些快捷高效的操作方式,如经常利用键盘的快速操作,让你脱离鼠标,可以让你不用花太多精力地去移动细小的指针进行操作,使得工作的效率提高许多. 不过,实际上很多时候我们还是不得 ...

  7. C++走向远洋——40（第九周，深复制体验）

    */ * Copyright (c) 2016,烟台大学计算机与控制工程学院 * All rights reserved. * 文件名:text.cpp * 作者:常轩 * 微信公众号:Worldhe ...

  8. 国际控制报文协议ICMP

    国际控制报文协议ICMP ICMP简介 ICMP 用于主机或路由器报告差错情况和提供有关异常情况的报告(检测网络错误). ICMP 不是高层协议,而是 IP 层的协议. ICMP 报文的格式 ICMP ...

  9. USB小白学习之路（5） HID鼠标程序

    HID鼠标程序 1. 特别注意 需要特别注意,各个例程中的设备描述符,配置描述符等各种描述符都是已经配置好了的,我们需要做的只是在例程中将代码修改为自己需要的部分即可,一般情况下是不可以串搭配的. 2 ...

  10. 达拉草201771010105《面向对象程序设计（java）》第十七周学习总结

    达拉草201771010105<面向对象程序设计(java)>第十七周学习总结 第一部分:理论知识 1.多线程的概念: (1)多线程是进程执行过程中产生的多条执行线索. (2)多线程意味着 ...