作为html5中Web Storage的一种存储方式，localStorage和sessionStorage一样都是用来存储客户端临时信息的对象。

W3c上给的介绍是这两者区别在于前者用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。而sessionStorage存储的数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。个人的理解是你在打开一个页面时记录sessionStorage,当你把页面或者浏览器关闭时session中的数据即销毁。

接下来是测试。

先创建一个index.html，代码：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <input type="button" value="Login" onclick="submit()" />  
        <input type="text" name="text" id="text" />  
        <input type="button" value="show" onclick="show()" />  
        <a href="33.html" target="_blank">33.html</a>
</body>

<script>

            function submit() {  
                var str = document.getElementById("text").value.trim();  
                setInfo(str);  
                document.getElementById("text").value = "";  
            }  
            //储存数据  
            function setInfo(name) {  
                var storage = window.sessionStorage;  
                storage.setItem('name', name);  
            }  
            //显示数据  
            function show() {  
               var storage = window.sessionStorage;  
               var str = "your name is " + storage.getItem("name");  
               document.getElementById("text").value = str;  
            }  
         </script>  
</html>

先点击show按钮，在文本框出现的是“your name is null”，之后只需在文本框中输入数据再点击login按钮就能把数据存储到sessionStorage。如图

​

现在点击show 文本框就显示“your name is xiaoming”。

然后再创建一个33.html，代码：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script>  
        var str = window.sessionStorage;  
        alert(str.getItem("name"));  
    </script>  
</head>
<body>
</body>
</html>

最后只要点击index.html的33.html跳转到该页面就能发现sessionstorage内数据是共享的。

sessionStorage 使用方法的更多相关文章

  1. JQuery和JS操作LocalStorage/SessionStorage的方法

    LocalStorage 是对Cookie的优化 没有时间限制的数据存储 在隐私模式下不可读取 大小限制在500万字符左右,各个浏览器不一致 在所有同源窗口中都是共享的 本质是在读写文件,数据多的话会 ...

  2. JQuery和JS操作LocalStorage/SessionStorage的方法（转）

    出处:http://blog.csdn.net/djzhao627/article/details/50747628 首先说一下LocalStorage和SessionStorage LocalSto ...

  3. localStorage，sessionStorage的方法重写

    本文是针对于localStorage,sessionStorage对于object,string,number,bollean类型的存取方法 我们知道,在布尔类型的值localStorage保存到本地 ...

  4. sessionStorage和localStorage的使用方法

    1.sessionStorage sessionStorage生命周期为当前窗口或标签页,一旦窗口或标签页被永久关闭了,那么所有通过sessionStorage存储的数据也就被清空 JSON.pars ...

  5. HTMl5的存储方式sessionStorage和localStorage详解

    html5中的Web Storage包括了两种存储方式:sessionStorage和localStorage.sessionStorage用于本地存储一个会话(session)中的数据,这些数据只有 ...

  6. html5 sessionStorage 与 localStorage存储

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

  7. HTMl5的sessionStorage和localStorage

    HTMl5的sessionStorage和localStorage html5中的Web Storage包括了两种存储方式:sessionStorage和localStorage. sessionSt ...

  8. HTML5中的sessionStorage和localStorage

    html5中的Web Storage包括了两种存储方式:sessionStorage和localStorage. sessionStorage用于本地存储一个会话(session)中的数据,这些数据只 ...

  9. js通过sessionStorage实现的返回上一页

    通常,我们都会使用比较熟悉的javascript:history.go(-1)来实现返回上一页,此种方法有一个问题就是返回上一页后不能刷新当前页面,给我们的开发带来了一定的不便,显然有时这种方法就不是 ...

随机推荐

  1. Facebook超过1亿用户数据泄露，疑与中国黑客组织有关？

    Facebook又向用户投放了另一个重磅炸弹,承认其超过1亿用户中的所有用户都应该认定恶意的第三方垃圾信息以及强大的黑客组织泄露了他们的公开个人资料信息. 周三,Facebook首席执行官马克扎克伯格 ...

  2. django之子应用中开发视图函数

    一:修改视图函数 报错:ImportError: No module named 'django' 原因是:pycharm中的解释器未选择虚拟环境里面的python3 from django.shor ...

  3. FPGA资源平民化的新晋- F9 技术解析

    FPGA (现场可编程门阵列)由于其硬件并行加速能力和可编程特性,在传统通信领域和IC设计领域大放异彩.一路走来,FPGA并非一个新兴的硬件器件,由于其开发门槛过高,硬件加速算法的发布和部署保护要求非 ...

  4. 5G即将到来，你还会购买4G手机吗?

    科技在不断进步,通信技术也是如此,5G网络将于明年下半年开始测试部署,4G手机是否值得更换呢?三星上周发布了Galaxy Note 9智能手机,这也给消费者带来了一个难题:到底是现在花上1000美元将 ...

  5. windows 系统再重启后，USB口失效(鼠标、U盘都无法识别)的过程及解决方法

    今天都差点忘记写随笔.今天在工作中,将电脑重启了一次,悲催了.重启完成后,鼠标无法使用了.最初认为 鼠标的问题,就一直"砸",但后来换了鼠标,仍然不能使用,开始认为没这边简单,拿出 ...

  6. bzoj1964: hull 三维凸包

    传送门 二维平面四个点求凸包面积->任选三个点面积之和/2 三维平面五个点求凸包体积->任选四个点体积之和/2 二维平面三个点面积->二个二维向量行列式值的绝对值/2 三维平面四个点 ...

  7. 删除c++项目中的类

    关闭引擎和vs 在工程目录中删除Source文件夹下相应的cpp和h文件 删除工程目录的saved 文件夹和intermediate文件夹 删除工程目录中binaries文件夹内的所有内容 右键工程文 ...

  8. 浅谈关于SQL优化的思路

    零.为什么要优化 系统的吞吐量瓶颈往往出现在数据库的访问速度上 随着应用程序的运行,数据库的中的数据会越来越多,处理时间会相应变慢 数据是存放在磁盘上的,读写速度无法和内存相比 一.观察 MySQL优 ...

  9. php面试专题---MYSQL查询语句优化

    php面试专题---MYSQL查询语句优化 一.总结 一句话总结: mysql的性能优化包罗甚广: 索引优化,查询优化,查询缓存,服务器设置优化,操作系统和硬件优化,应用层面优化(web服务器,缓存) ...

  10. SPOJ AEROLITE

    题目链接: http://www.spoj.com/problems/AEROLITE/en/ ---------------------------------------------------- ...