会话存储的工作方式和本地存储的工作方式很接近，不同之处在于数据是各个浏览器上下文私有的，会在文档被关闭时移除（注意是被关闭时才移除，刷新是不会移除的）。我们通过全局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. win7+centos6.5安装双系统

    前言:之前在琢磨怎么安装双系统 倒腾了两天终于给装上了 使用软件 镜像:CentOS-6.5-x86_64-bin-DVD1.iso 开机引导软件 easybcd2.2 u盘制作软件 USBWrite ...

  2. windows版 Sublime Text 2 快捷键

    ucifr 翻译了 Sublime Text 2 快捷键 Mac版,用win系统的哥们表示伤不起啊~ 今天把windows版 Sublime Text 2 快捷键 整理了出来,与众兄弟们分享: Ctr ...

  3. OS Summary 1

    内容概述 什么是操作系统 操作系统的演变 操作系统结果的分类 什么是操作系统 操作系统可以是: 一个控制程序 一个资源管理器 一套标准库 操作系统通常有内核.命令行和 GUI 组成.我们研究的主要是内 ...

  4. 应对百万访问量的epoll模式

    写在前面 select/poll与epoll select/poll模型工作机理 select/poll模型的局限 epoll模型工作机理 epoll的局限 golang中的epoll golang源 ...

  5. 高效能Windows人士的N个习惯之一：启动篇

    接触电脑十多年,经历了各种折腾阶段,这几年开始沉静下来,不再追求花哨的界面与应用,只注重工作的效率,逐渐养成了一套自己的操作习惯,感觉不错,特撰文分享.标题借用了一下<高效能人士的七个习惯> ...

  6. Python的Flask框架开发RESTful API

    web框架选择 Django,流行但是笨重,还麻烦,人生苦短,肯定不选 web.py,轻量,但据说作者仙逝无人维护,好吧,先pass tornado,据说倡导自己造轮子,虽然是facebook开源的吧 ...

  7. scrapy爬虫框架教程（二）-- 爬取豆瓣电影

    前言 经过上一篇教程我们已经大致了解了Scrapy的基本情况,并写了一个简单的小demo.这次我会以爬取豆瓣电影TOP250为例进一步为大家讲解一个完整爬虫的流程. 工具和环境 语言:python 2 ...

  8. win10环境下VS2019配置NTL库

    win10环境下VS2019配置NTL库 1.下载 WINNTL库文件     https://www.shoup.net/ntl/download.html 2.创建静态库 文件->新建-&g ...

  9. JDBC大数据的采取

    ## JDBC的大类型数据的存取 ## # 基本概念: |-- 大文本类型数据和大二进制数据: 主要思想用于将大型的二进制数据(字节) 或是大型的文本数据(字符)从磁盘文件中读取 到数据库中,或是从数 ...

  10. 车道线检测LaneNet

    LaneNet LanNet Segmentation branch 完成语义分割,即判断出像素属于车道or背景 Embedding branch 完成像素的向量表示,用于后续聚类,以完成实例分割 H ...