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)来实现返回上一页,此种方法有一个问题就是返回上一页后不能刷新当前页面,给我们的开发带来了一定的不便,显然有时这种方法就不是 ...
随机推荐
- PAT考砸有感
今天下午1点半到4点半是考PAT的时间,考场很安静,大家都在安静地思考,唯一能够听到的是键盘敲击的声音,和几只ACM大牛提前离场的自信的声音,那仿佛就是在说着:哈哈哈,又一次轻松过.考试结束,我还在调 ...
- [python 学习] argparse模块
https://docs.python.org/3/library/argparse.html#module-argparse
- $_POST 和 php://input 的区别
手册中摘取的几句话: 当 HTTP POST 请求的 Content-Type 是 application/x-www-form-urlencoded 或 multipart/form-data 时, ...
- bzoj4399 魔法少女LJJ 线段树合并+线段树二分+并查集
题目传送门 https://lydsy.com/JudgeOnline/problem.php?id=4399 题解 毒瘤题 \(9\) 种操作还有支持动态图的连通性 仔细读题 $ c<=7$. ...
- flask之模板之继承
一:继承 基类模板base.html 中在进行挖坑 {% block 坑的名字%}{% endblock %} 子类模板test.html 中 通过 {% extends "base.ht ...
- mysql 8.0.13 zip windows 10安装
1.下载安装包 https://dev.mysql.com/downloads/mysql/ 下载后解压到D:\Program Files\mysql-8.0.13-winx64 2.添加配置文件my ...
- MYSQL数据库类型与JAVA类型对应表
MYSQL数据库类型与JAVA类型对应表 MYSQL数据库类型与JAVA类型对应表 类型名称 显示长度 数据库类型 JAVA类型 JDBC类型 索引(int) VARCHAR L+N VARCHA ...
- spring boot 开静态资源访问，配置视图解析器
配置视图解析器spring.mvc.view.prefix=/pages/spring.mvc.view.suffiix= spring boot 开静态资源访问application.proerti ...
- 前端通过axios和FormData实现文件上传功能遇到的坑
使用element-ui中的upload上传组件,前端上传数据参数已经传过去了,但是后端 (java) 接不到数据 (null) [解决方案] html部分: <el-button type=& ...
- Android O编译前修改文件和目录权限
当需要修改某文件或路径权限时,我们可以在init.rc开机启动某节点添加chmod命令进行修改.但是对于system分区,由于是ro权限,在init.rc使用chmod修改权限无效.需要在文件编译时, ...