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

    因为我用的是python3,所以所用到的类都是新式类,这里我说的都是新式类,python2类的继承复杂一些,主要有新式类和老式类.python3类(新式类)的继承是是广度优先(BFS),实例如下: c ...

  2. Django环境的搭建以及最简示例

    一.环境的搭建 先安装pip yum install python-pip 安装失败: 安装epel扩展源 yum install epel-release 在安装pip 再利用pip安装django ...

  3. Java - 面向对象练习 - market

    Marketpackage market; public class Market {    private String marname;    private Product[] producta ...

  4. 隐私标签(Privacy.Tag)：轻轻一贴，愉快拍照！

    用相机去捕捉精彩瞬间,用照片来记录生活足迹,并实时地与朋友们分享当下的心情,似乎已成为我们忙碌生活中最有趣的调味剂.但随着移动设备照相功能的日益完善,以及各大社交平台的不断兴起,很多时候,你是否也会有 ...

  5. Navicat远程连接服务器Mysql

    使用NAVICAT远程访问MYSQL的步骤 1.修改远程访问权限 //进入MySQL服务器或使用其它工具 xxxx@ubuntu:/$ mysql -h localhost -u root -p xx ...

  6. js 网页运行原理

    当我们打开一个网页的时候,浏览器会首先创建一个窗口,这个窗口就是我所知道的window对象,也就是整个Javascript运行所依附的全局变量. 为了加载网页文档,当前窗口又需要创建一个Documen ...

  7. Luogu1681_ 最大正方形II

    题目背景 忙完了学校的事,v神终于可以做他的"正事":陪女朋友散步.一天,他和女朋友走着走着,不知不觉就来到了一个千里无烟的地方.v神正要往回走,如发现了一块牌子,牌子上有有一行小 ...

  8. java文件压缩ZipOutPutStream

    其实最好的书籍就是javaAPI 1.创建ZipOutPutStream流,利用BufferedOutputStream提个速. 2.新建zip方法,用来压缩文件,传参 3.zip方法利用putNex ...

  9. 腾讯玩O2O手机维修 巨头入局引市场大变

     巨头入局引市场大变" title="腾讯玩O2O手机维修 巨头入局引市场大变">     对于"游击队"或初创企业来说,最怕的就是巨头的杀入. ...

  10. selenium+requests进行cookies保存读取操作

    看这篇文章之前大家可以先看下我的上一篇文章:cookies详解 本篇我们就针对上一篇来说一下cookies的基本应用 使用selenium模拟登陆百度 from selenium import web ...