作为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. android 打卡 虚拟定位 sqlite

    1.使用android5.1模拟器 android5.1模拟器使用数据库管理参数文件,6.0及以后的版本使用xml文件管理 2.使用sqlite修改配置文件 3.修改secure库中的android_ ...

  2. 黑客教父郭盛华：提升家庭WiFi的10个方法

    中国黑客教父,知名网络安全专家郭盛华曾发博文表示:“WiFi是互联网发展过程中最重要的发展之一,虚拟世界没有百分百的安全,所以杀毒软件并不可以抵抗全部的黑客攻击.“ 用户WiFi密码尽量不要使用简单单 ...

  3. 【leetcode】301. Remove Invalid Parentheses

    题目如下: 解题思路:还是这点经验,对于需要输出整个结果集的题目,对性能要求都不会太高.括号问题的解法也很简单,从头开始遍历输入字符串并对左右括号进行计数,其中出现右括号数量大于左括号数量的情况,表示 ...

  4. vue兄弟组件之前传信

    1.使用vuex 2.子传父,父传子 3.使用中央事件总线 1.新建一个js文件,然后引入vue 实例化vue 最后暴露这个实例 2.在要用的组件内引入这个组件 3.通过vueEmit.$emit(' ...

  5. Eclipse 创建springBoot项目的时候需要首先 安装STS(亲测)

    开始我的Eclipse版本是4.4.2.安装网上的步骤多次不成功. 后来直接去下载了最新版的Eclipse 2018-9版本的 是 4.9. 下面是安装步骤: (1)eclipse->Help- ...

  6. Graph Neural Networks for Computer Vision

    Graph Neural Networks for Computer Vision I was attracted by this image: This is an inspiring image ...

  7. B/S大文件断点续传

    一. 功能性需求与非功能性需求 要求操作便利,一次选择多个文件和文件夹进行上传:支持PC端全平台操作系统,Windows,Linux,Mac 支持文件和文件夹的批量下载,断点续传.刷新页面后继续传输. ...

  8. BZOJ 3879: SvT 虚树 + 后缀自动机

    Description (我并不想告诉你题目名字是什么鬼) 有一个长度为n的仅包含小写字母的字符串S,下标范围为[1,n]. 现在有若干组询问,对于每一个询问,我们给出若干个后缀(以其在S中出现的起始 ...

  9. [CF959F]Mahmoud and Ehab and yet another xor task题解

    搞n个线性基,然后每次在上一次的基础上插入读入的数,前缀和线性基,或者说珂持久化线性基. 然后一个num数组记录当时线性基里有多少数 然后每次前缀操作一下就珂以了 代码 #include <cs ...

  10. create-react-app下的@修饰器正确的使用方式记录

    在create-react-app下使用es7的@修饰器会报错''Support for the experimental syntax 'decorators-legacy' isn't curre ...