sessionStorage 使用方法
作为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 使用方法的更多相关文章
- JQuery和JS操作LocalStorage/SessionStorage的方法
LocalStorage 是对Cookie的优化 没有时间限制的数据存储 在隐私模式下不可读取 大小限制在500万字符左右,各个浏览器不一致 在所有同源窗口中都是共享的 本质是在读写文件,数据多的话会 ...
- JQuery和JS操作LocalStorage/SessionStorage的方法（转）
出处:http://blog.csdn.net/djzhao627/article/details/50747628 首先说一下LocalStorage和SessionStorage LocalSto ...
- localStorage，sessionStorage的方法重写
本文是针对于localStorage,sessionStorage对于object,string,number,bollean类型的存取方法 我们知道,在布尔类型的值localStorage保存到本地 ...
- sessionStorage和localStorage的使用方法
1.sessionStorage sessionStorage生命周期为当前窗口或标签页,一旦窗口或标签页被永久关闭了,那么所有通过sessionStorage存储的数据也就被清空 JSON.pars ...
- HTMl5的存储方式sessionStorage和localStorage详解
html5中的Web Storage包括了两种存储方式:sessionStorage和localStorage.sessionStorage用于本地存储一个会话(session)中的数据,这些数据只有 ...
- html5 sessionStorage 与 localStorage存储
sessionStorage用于本地存储一个会话(session)中的数据,这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁.因此sessionStorage不是一种持久化的本地 ...
- HTMl5的sessionStorage和localStorage
HTMl5的sessionStorage和localStorage html5中的Web Storage包括了两种存储方式:sessionStorage和localStorage. sessionSt ...
- HTML5中的sessionStorage和localStorage
html5中的Web Storage包括了两种存储方式:sessionStorage和localStorage. sessionStorage用于本地存储一个会话(session)中的数据,这些数据只 ...
- js通过sessionStorage实现的返回上一页
通常,我们都会使用比较熟悉的javascript:history.go(-1)来实现返回上一页,此种方法有一个问题就是返回上一页后不能刷新当前页面,给我们的开发带来了一定的不便,显然有时这种方法就不是 ...
随机推荐
- Oracle 索引数据字典、基于函数的索引
user_indexes 字典视图包含了索引名和唯一性, user_ind_columns视图包含了索引名.表名.以及列名 dba_indexes dba_ind_columns 同理 select ...
- 【串线篇】spring boot日志使用
一.默认配置 1.SpringBoot默认帮我们配置好了日志: //记录器 Logger logger = LoggerFactory.getLogger(getClass()); @Test pub ...
- 怎么在tensorflow中打印graph中的tensor信息
from tensorflow.python import pywrap_tensorflow import os checkpoint_path=os.path.join('./model.ckpt ...
- VS TODO注释快捷键
快速按出任务列表 todo 注释 Ctrl 键+ \| 键+ T键
- 如何搭建一个spring boot项目
什么是springboot? Spring Boot俗称微服务.Spring Boot是由Pivotal团队提供的全新框架,其设计目的是用来简化新Spring应用的初始搭建以及开发过程.该框架使用了特 ...
- RMQ Topic
原创转载请注明出处:https://www.cnblogs.com/agilestyle/p/11794927.html RMQ Topic Project Directory Maven Depen ...
- python学习笔记（十五）python操作数据库
1.连接mysql,ip,端口号,密码,账号,数据库 2.建立游标 3.执行sql 4.获取结果 5.关闭连接,关闭游标 游标打开仓库的大门: import pymysql conn=pymysql. ...
- 【Java】Java中charAt()方法的使用
说明 java.lang.String.charAt() 方法返回指定索引处的char值.索引范围是从0到length() - 1.对于数组索引,序列的第一个char值是在索引为0,索引1,依此类推 ...
- 20180715-Java StringBuffer和StringBuilder类
public class Test{ public static void main(String args[]){ StringBuffer sBuffer = new StringBuffer(& ...
- [CSP-S模拟测试]:Median（暴力+模拟）
题目描述 定义两个数列: $$S=\{S(1),S(2),...,S(n)\}\text{和}S_2\{S_2(1),S_2(2),...,S_2(n)\}$$ $$S(k)=(p_k\times k ...