会话存储的工作方式和本地存储的工作方式很接近，不同之处在于数据是各个浏览器上下文私有的，会在文档被关闭时移除（注意是被关闭时才移除，刷新是不会移除的）。我们通过全局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. 吴裕雄--天生自然 神经网络人工智能项目：基于深度学习TENSORFLOW框架的图像分类与目标跟踪报告（续四）

    2. 神经网络的搭建以及迁移学习的测试 7.项目总结 通过本次水果图片卷积池化全连接试验分类项目的实践,我对卷积.池化.全连接等相关的理论的理解更加全面和清晰了.试验主要采用python高级编程语言的 ...

  2. LG_2286_[HNOI2004]宠物收养场

    题目描述 凡凡开了一间宠物收养场.收养场提供两种服务:收养被主人遗弃的宠物和让新的主人领养这些宠物. 每个领养者都希望领养到自己满意的宠物,凡凡根据领养者的要求通过他自己发明的一个特殊的公式,得出该领 ...

  3. PHP 错误与异常的日志记录

    提到 Nginx + PHP 服务的错误日志,我们通常能想到的有 Nginx 的 access 日志.error 日志以及 PHP 的 error 日志.虽然看起来是个很简单的问题,但里面其实又牵扯到 ...

  4. iPhone X价格下跌！用户依旧冷眼相看为哪般？

    X价格下跌!用户依旧冷眼相看为哪般?" title="iPhone X价格下跌!用户依旧冷眼相看为哪般?"> 其实对于刚刚过去的2017年手机市场来说,根本没有一款 ...

  5. 接轨国际，碰撞更多科研火花——第八届ChinaSys大会专访微软亚洲研究院首席研究员张霖涛

    作者:微软亚洲研究院实习生 徐祎雪 卢思奇 2015年6月5日至6日,由中国科学院深圳先进技术研究院先进计算与数字工程研究所主办的第八届中国计算机系统(ChinaSys)学术研讨会在厦门大学召开.来自 ...

  6. 从iPhone下滑 看科技转型之困

    看科技转型之困" title="从iPhone下滑 看科技转型之困"> 毫无疑问,苹果正在面临一次关键转型.最近苹果股价较高点134.54美元下跌21%以上的实事, ...

  7. 菜篮子成血战场！生鲜O2O为何厮杀如此惨烈

    衣食住行作为与大众生活直接挂钩的刚需,已经被诸多互联网企业全面渗入,并在彻底颠覆大众原有的生活形态.但其中作为最底层.最基本的"菜篮子"--生鲜市场,似乎仍然没有被互联网元素完全& ...

  8. iOS多线程之Thread

    多线程 • Thread 是苹果官方提供的,简单已用,可以直接操作线程对象.不过需要程序员自己管理线程的生命周期,主要是创建那部分 优缺点 面向对象,简单易用 直接操作线程对象 需要自己管理线程生命周 ...

  9. QIs for Spread

    玩了好几天,看了好多剧,所以这几天的进度稍微有点慢,另外,<一起同过窗>真香! 延展特性涉及解集覆盖的区域.一个具有良好分布的解集应该包含来自PF每个部分的解集,而不遗漏任何区域.然而,大 ...

  10. python 写入 execl 文件 之 xlwt 模块

    1. xlwt 安装 pip install xlwt 2. xlwt 操作, 代码 #!/usr/bin/env python3 import xlwt # 只能创建 新的 excel 文件 # 1 ...