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

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. centos 7 jdk

    1.去oracle官网下载 2.查看当前环境中安装了那些jdk,如果有那么卸载掉 安装好的CentOS会自带OpenJdk,用命令 java -version ,会有下面的信息: java versi ...

  2. MyBatis(五)

    MyBatis Generator CMyBatis代码生成器,简称 MBG)

  3. JavaWeb(四):JDBC

    数据持久化(persistence) 把数据保存到可掉电式存储设备中以供之后使用. 大多数情况下,特别是企业级应用,数据持久化意味着将内存中的数据保存到硬盘上加以”固化”,而持久化的实现过程大多通过各 ...

  4. 小记:web安全测试之——固定session漏洞

    今天因为项目背景需要,需要检测web接口是否一些安全隐患. 无奈于从未掌握有系统的渗透性知识,只好根据个人对网络协议和 web 的理解,做一些探索,最终发现了一个session fixation at ...

  5. php大文件断点续传

    该项目核心就是文件分块上传.前后端要高度配合,需要双方约定好一些数据,才能完成大文件分块,我们在项目中要重点解决的以下问题. * 如何分片: * 如何合成一个文件: * 中断了从哪个分片开始. 如何分 ...

  6. POJ 2391--Ombrophobic Bovines(最大流(拆点)+二分+最短路)

    Ombrophobic Bovines Description FJ's cows really hate getting wet so much that the mere thought of g ...

  7. 【Java】ApplicationContext应用上下文工具类

    @Slf4j @Service public class SpringContextHolder implements ApplicationContextAware, DisposableBean ...

  8. 台哥原创:java 数独源码

    2010年,当时正在做手机游戏的客户端开发工作. 每天加班之余,用了两三个晚上,开发了这个数独. 主要是生成数独数组的算法,有点难度.. ​ 如下图:点选数字栏里的数字后,界面上所有该数字会高亮显示. ...

  9. Android O编译前修改文件和目录权限

    当需要修改某文件或路径权限时,我们可以在init.rc开机启动某节点添加chmod命令进行修改.但是对于system分区,由于是ro权限,在init.rc使用chmod修改权限无效.需要在文件编译时, ...

  10. day13—CSS之导航栏

    转行学开发,代码100天——2018-03-29 见过这么多网页,没有导航栏的几乎没见过.因此,对导航栏的练习非常之必要. 导航栏的实现,基本上都是通过链接列表实现,即ul->li->a标 ...