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

    Given an array S of n integers, are there elements a, b, c, and d in S such that a + b + c + d = tar ...

  2. excel中ppmt/pmt/ipmt的计算方式

    参考来源: https://www.experts-exchange.com/articles/1948/A-Guide-to-the-PMT-FV-IPMT-and-PPMT-Functions.h ...

  3. MyBatis like (模糊查询)

    select * from user where user_name like concat('%',#{userName},'%'); select * from user where user_n ...

  4. React中key的讲解

    通过阅读React的文档我们知道React这个框架的核心思想是,将页面分割成一个个组件,一个组件还可能嵌套更小的组件,每个组件有自己的数据(属性/状态);当某个组件的数据发生变化时,更新该组件部分的视 ...

  5. 机器学习迁移模型到IOS

    https://paulswith.github.io/2018/02/24/%E8%BF%81%E7%A7%BB%E5%AD%A6%E4%B9%A0InceptionV3/ 上文记录了如何从一个别人 ...

  6. 安卓权威编程指南-笔记（第24章 Looper Handler 和 HandlerThread）

    AsyncTask是执行后台线程的最简单方式,但它不适用于那些重复且长时间运行的任务. 1. Looper Android中,线程拥有一个消息队列(message queue),使用消息队列的线程叫做 ...

  7. 游LeetCode一月之闲谈

    今年的2月比往常更长,不是因为比往年多了一天,而是被病毒隔离在家的日子显得十分漫长.如果再不给自己找点事情做的话,且不论身体方面的健康状况,精神方面可能也会有些隐忧.做为一名工程师,适时地读上几本平日 ...

  8. Docker 运行容器 CentOS7 使用systemctl 启动报错 Failed to get D-Bus connection: Operation not permitted

    原系统:Centos 7 Docker 版本:1.12.6 操作:安装并运行 Tomcat 问题:在创建好容器之后,并且进入系统运行启动tomcat [root@cd11558d3a22 /]# sy ...

  9. 一步到位datatabls中文化

    #一步到位datatabls中文化 加入以下代码 $(document).ready(function () { $('#declarationList').DataTable({ destroy:t ...

  10. Swift和Objective-C中的协议(protocol)有什么异同

    Swift和Objective-C中的protocol的相同点在于:两者可以被用作代理.Objective-C中的protocol类似于Java中的Interface,在实际开发中主要用与适配器模式( ...